diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 37914b18..19d27680 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,14 +1,14 @@
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
     },
-  },
 };
 
 export default preview;
diff --git a/src/activities/ActivityContext.ts b/src/activities/ActivityContext.ts
index 95cb99f6..f8ea86ec 100644
--- a/src/activities/ActivityContext.ts
+++ b/src/activities/ActivityContext.ts
@@ -1,170 +1,169 @@
-import {
-    reportScoreForCurrentPage,
-    getPageData,
-    storePageData
-} from "../page-api";
-import rightAnswer from "./right_answer.mp3";
-import wrongAnswer from "./wrong_answer.mp3";
-
-// This is passed to an activity to give it things that it needs. It's mostly
-// a wrapper so that activities don't have direct knowledge of how parts outside
-// of them are arranged.
-export class ActivityContext {
-    public pageElement: HTMLElement;
-    public pageIndex: number;
-    public analyticsCategory: string;
-    // Typically, indices of all pages with the same analytics category.
-    // (This is necessary to be able to report analytics for this category as a group.)
-    public pagesToGroupForAnalytics: number[] | undefined;
-
-    private listeners = new Array<{
-        name: string;
-        target: Element;
-        listener: EventListener;
-    }>();
-
-    constructor(
-        pageIndex: number,
-        pageDiv: HTMLElement,
-        analyticsCategory: string,
-        pagesToGroupForAnalytics?: number[]
-    ) {
-        this.pageIndex = pageIndex;
-        this.pageElement = pageDiv;
-        this.analyticsCategory = analyticsCategory;
-        this.pagesToGroupForAnalytics = pagesToGroupForAnalytics;
-    }
-
-    // Report a score that can be used for analytics. The caller can call this repeatedly without worrying
-    // about the logic of whether we only report the user's first attempt.
-    public reportScore(possiblePoints: number, actualPoints: number) {
-        // please leave this log in... if we could make it only show in storybook, we would
-        console.log(
-            `ActivityContext.reportScoreForCurrentPage(<page>, ${possiblePoints}, ${actualPoints},${this.analyticsCategory})`
-        );
-        reportScoreForCurrentPage(
-            this.pageIndex,
-            possiblePoints,
-            actualPoints,
-            this.analyticsCategory,
-            this.pagesToGroupForAnalytics
-        );
-    }
-
-    // Get data used during this current reading of the book. The `key` parameter only needs to be
-    // unique to the activity's page.
-    public getSessionPageData(key: string): string {
-        return getPageData(this.pageIndex, key);
-    }
-
-    // Set data used during this current reading of the book that you can read if the
-    // they come back to this page. The `key` parameter only needs to be
-    // unique to the activity's page.
-    public storeSessionPageData(key: string, value: string) {
-        // please leave this log in... if we could  make it only show in storybook, we would
-        console.log(
-            `ActivityContext.storePageData(<page>, '${key}', '${value}')`
-        );
-        storePageData(this.pageIndex, key, value);
-    }
-
-    public playCorrect() {
-        let path = rightAnswer;
-        if (path.startsWith("/")) {
-            // I can't figure out how to get rid of the leading slash in the path in the production build.
-            path = path.substring(1);
-        }
-        this.playSound(path);
-    }
-
-    public playWrong() {
-        let path = wrongAnswer;
-        if (path.startsWith("/")) {
-            // I can't figure out how to get rid of the leading slash in the path in the production build.
-            path = path.substring(1);
-        }
-        this.playSound(path);
-    }
-
-    private getPagePlayer(): any {
-        let player = document.getElementById("activity-sound-player") as any;
-        if (player && !player.play) {
-            player.remove();
-            player = null;
-        }
-        if (!player) {
-            player = document.createElement("audio");
-            player.setAttribute("id", "activity-sound-player");
-            document.body.appendChild(player);
-        }
-        return player;
-    }
-
-    public playSound(url: string) {
-        const player = this.getPagePlayer();
-        player.setAttribute("src", url);
-        player.play();
-    }
-
-    public addActivityStylesForPage(css: string) {
-        if (!this.pageElement.querySelector("[data-activity-stylesheet]")) {
-            const style = this.pageElement.ownerDocument!.createElement(
-                "style"
-            );
-            style.setAttribute("data-activity-stylesheet", ""); // value doesn't matter
-            // REVIEW: Scoped styles have been removed from the spec, so we are using
-            // a polyfill,  https://github.com/samthor/scoped, which is not very commonly used
-            // (only 56 stars at the moment). So we should not really be depending on this... it
-            // could break or whatever.
-            // Also, it's not working in Bloom Editor (maybe the polyfill could be added there?).
-            // I think it's better to just scope by hand using a class that
-            // uniquely matches the page. So I'm going to remove this.
-            style.setAttribute("scoped", "true");
-            style.innerText = css;
-            this.pageElement.parentNode!.insertBefore(style, this.pageElement); //NB: will be added even if firstChild is null
-        }
-    }
-
-    // Activities should use this to attach listeners so that we can detach them when the page is no longer
-    // showing. Among other things, this prevents double-attaching.
-    public addEventListener(
-        name: string,
-        target: Element,
-        listener: EventListener,
-        options?: AddEventListenerOptions | undefined
-    ) {
-        // store the info we need in order to detach the listener when we are stop()ed
-        this.listeners.push({
-            name,
-            target,
-            listener
-        });
-        target.addEventListener(name, listener, options);
-    }
-
-    // this is called by the activity manager after it stops the activity.
-    public stop() {
-        // detach all the listeners
-        this.listeners.forEach(l =>
-            l.target.removeEventListener(l.name, l.listener)
-        );
-    }
-
-    private sendMessageToPlayer(message: string) {
-        const activityMessage = {
-            messageType: "control",
-            controlAction: message
-        };
-        //console.log(`Sent activity navigation message to Player: ${message}`);
-        const messageJson = JSON.stringify(activityMessage);
-        window.postMessage(messageJson, "*"); // any window may receive
-    }
-
-    public navigateToNextPage() {
-        this.sendMessageToPlayer("navigate-to-next-page");
-    }
-
-    public navigateToPreviousPage() {
-        this.sendMessageToPlayer("navigate-to-previous-page");
-    }
-}
+import {
+    reportScoreForCurrentPage,
+    getPageData,
+    storePageData,
+} from "../page-api";
+import rightAnswer from "./right_answer.mp3";
+import wrongAnswer from "./wrong_answer.mp3";
+
+// This is passed to an activity to give it things that it needs. It's mostly
+// a wrapper so that activities don't have direct knowledge of how parts outside
+// of them are arranged.
+export class ActivityContext {
+    public pageElement: HTMLElement;
+    public pageIndex: number;
+    public analyticsCategory: string;
+    // Typically, indices of all pages with the same analytics category.
+    // (This is necessary to be able to report analytics for this category as a group.)
+    public pagesToGroupForAnalytics: number[] | undefined;
+
+    private listeners = new Array<{
+        name: string;
+        target: Element;
+        listener: EventListener;
+    }>();
+
+    constructor(
+        pageIndex: number,
+        pageDiv: HTMLElement,
+        analyticsCategory: string,
+        pagesToGroupForAnalytics?: number[],
+    ) {
+        this.pageIndex = pageIndex;
+        this.pageElement = pageDiv;
+        this.analyticsCategory = analyticsCategory;
+        this.pagesToGroupForAnalytics = pagesToGroupForAnalytics;
+    }
+
+    // Report a score that can be used for analytics. The caller can call this repeatedly without worrying
+    // about the logic of whether we only report the user's first attempt.
+    public reportScore(possiblePoints: number, actualPoints: number) {
+        // please leave this log in... if we could make it only show in storybook, we would
+        console.log(
+            `ActivityContext.reportScoreForCurrentPage(<page>, ${possiblePoints}, ${actualPoints},${this.analyticsCategory})`,
+        );
+        reportScoreForCurrentPage(
+            this.pageIndex,
+            possiblePoints,
+            actualPoints,
+            this.analyticsCategory,
+            this.pagesToGroupForAnalytics,
+        );
+    }
+
+    // Get data used during this current reading of the book. The `key` parameter only needs to be
+    // unique to the activity's page.
+    public getSessionPageData(key: string): string {
+        return getPageData(this.pageIndex, key);
+    }
+
+    // Set data used during this current reading of the book that you can read if the
+    // they come back to this page. The `key` parameter only needs to be
+    // unique to the activity's page.
+    public storeSessionPageData(key: string, value: string) {
+        // please leave this log in... if we could  make it only show in storybook, we would
+        console.log(
+            `ActivityContext.storePageData(<page>, '${key}', '${value}')`,
+        );
+        storePageData(this.pageIndex, key, value);
+    }
+
+    public playCorrect() {
+        let path = rightAnswer;
+        if (path.startsWith("/")) {
+            // I can't figure out how to get rid of the leading slash in the path in the production build.
+            path = path.substring(1);
+        }
+        this.playSound(path);
+    }
+
+    public playWrong() {
+        let path = wrongAnswer;
+        if (path.startsWith("/")) {
+            // I can't figure out how to get rid of the leading slash in the path in the production build.
+            path = path.substring(1);
+        }
+        this.playSound(path);
+    }
+
+    private getPagePlayer(): any {
+        let player = document.getElementById("activity-sound-player") as any;
+        if (player && !player.play) {
+            player.remove();
+            player = null;
+        }
+        if (!player) {
+            player = document.createElement("audio");
+            player.setAttribute("id", "activity-sound-player");
+            document.body.appendChild(player);
+        }
+        return player;
+    }
+
+    public playSound(url: string) {
+        const player = this.getPagePlayer();
+        player.setAttribute("src", url);
+        player.play();
+    }
+
+    public addActivityStylesForPage(css: string) {
+        if (!this.pageElement.querySelector("[data-activity-stylesheet]")) {
+            const style =
+                this.pageElement.ownerDocument!.createElement("style");
+            style.setAttribute("data-activity-stylesheet", ""); // value doesn't matter
+            // REVIEW: Scoped styles have been removed from the spec, so we are using
+            // a polyfill,  https://github.com/samthor/scoped, which is not very commonly used
+            // (only 56 stars at the moment). So we should not really be depending on this... it
+            // could break or whatever.
+            // Also, it's not working in Bloom Editor (maybe the polyfill could be added there?).
+            // I think it's better to just scope by hand using a class that
+            // uniquely matches the page. So I'm going to remove this.
+            style.setAttribute("scoped", "true");
+            style.innerText = css;
+            this.pageElement.parentNode!.insertBefore(style, this.pageElement); //NB: will be added even if firstChild is null
+        }
+    }
+
+    // Activities should use this to attach listeners so that we can detach them when the page is no longer
+    // showing. Among other things, this prevents double-attaching.
+    public addEventListener(
+        name: string,
+        target: Element,
+        listener: EventListener,
+        options?: AddEventListenerOptions | undefined,
+    ) {
+        // store the info we need in order to detach the listener when we are stop()ed
+        this.listeners.push({
+            name,
+            target,
+            listener,
+        });
+        target.addEventListener(name, listener, options);
+    }
+
+    // this is called by the activity manager after it stops the activity.
+    public stop() {
+        // detach all the listeners
+        this.listeners.forEach((l) =>
+            l.target.removeEventListener(l.name, l.listener),
+        );
+    }
+
+    private sendMessageToPlayer(message: string) {
+        const activityMessage = {
+            messageType: "control",
+            controlAction: message,
+        };
+        //console.log(`Sent activity navigation message to Player: ${message}`);
+        const messageJson = JSON.stringify(activityMessage);
+        window.postMessage(messageJson, "*"); // any window may receive
+    }
+
+    public navigateToNextPage() {
+        this.sendMessageToPlayer("navigate-to-next-page");
+    }
+
+    public navigateToPreviousPage() {
+        this.sendMessageToPlayer("navigate-to-previous-page");
+    }
+}
diff --git a/src/activities/activityManager.ts b/src/activities/activityManager.ts
index 076d5e2f..71ee47ef 100644
--- a/src/activities/activityManager.ts
+++ b/src/activities/activityManager.ts
@@ -1,361 +1,354 @@
-import { loadDynamically } from "./loadDynamically";
-import { ActivityContext } from "./ActivityContext";
-import iframeModule from "./iframeActivity";
-import simpleDomChoiceActivityModule from "./domActivities/SimpleDomChoice";
-import simpleCheckboxQuizModule from "./domActivities/SimpleCheckboxQuiz";
-import dragToDestinationModule from "./dragActivities/DragToDestination";
-
-// This is the module that the activity has to implement (the file must export these functions)
-export interface IActivityModule {
-    // this is a weird typescript thing... the activity just needs to export a class as its default export, and that
-    // class should implement IActivityObject;
-    default: IActivityObject;
-    activityRequirements: () => IActivityRequirements;
-}
-
-// This is the class that the activity module has to implement
-export interface IActivityObject {
-    // Do one-time initialization of the page's html. In the current implementation,
-    // this is acting on a copy of the html, not the real DOM which the user will interact with.
-    // So we can't do things like set up event handlers. (See showingPage below.)
-    initializePageHtml: (context: ActivityContext) => void;
-
-    // Do any setup needed each time the activity becomes the active page.
-    // This is acting on the real DOM, so this is the time to set up event handlers, etc.
-    showingPage: (context: ActivityContext) => void;
-
-    // This is called in place of the normal code that plays sound and animations when the page first appears,
-    // if the activity's requirements specify soundManagement: true.
-    doInitialSoundAndAnimation?: (context: ActivityContext) => void;
-
-    stop: () => void;
-}
-// Constructing stuff from interfaces has problems with typescript at the moment.
-// The class should have this constructor, but should not claim this interface.
-// See https://stackoverflow.com/a/13408029/723299.
-export interface IActivityObjectConstructable {
-    new (element: HTMLElement): IActivityObject;
-}
-export interface IActivityRequirements {
-    dragging?: boolean;
-    clicking?: boolean;
-    typing?: boolean;
-    // suppress normal sound (and music, and animation)
-    // If this is true, the activity should implement doInitialSoundAndAnimation
-    // if anything should autoplay when the page appears.
-    soundManagement?: boolean;
-}
-
-// This is the object (implemented by us, not the activity) that represents our own
-// record of what we know about the activity.
-export interface IActivityInformation {
-    name: string; // from data-activity attribute of the page
-    module: IActivityModule | undefined; // the module of code we loaded from {name}.js
-    runningObject: IActivityObject | undefined; // an instance of the default class exported by the module (but only if it's the current activity)
-    requirements: IActivityRequirements; // returned by the module's activityRequirements() function
-    context: ActivityContext | undefined;
-}
-
-export class ActivityManager {
-    private builtInActivities: { [id: string]: IActivityModule } = {};
-    private previousPageElement: HTMLElement;
-    private bookActivityGroupings: { [id: string]: number[] } = {};
-
-    constructor() {
-        this.builtInActivities["iframe"] = iframeModule as IActivityModule;
-        this.builtInActivities[
-            "simple-dom-choice"
-        ] = simpleDomChoiceActivityModule as IActivityModule;
-        this.builtInActivities[
-            simpleCheckboxQuizModule.dataActivityID
-        ] = simpleCheckboxQuizModule as IActivityModule;
-
-        // Review: currently these all use the same module. A lot of stuff is shared, all the way down to the
-        // prepareActivity() function in dragActivityRuntime. But a good many specialized TOP types are
-        // specific to one of them and not needed for the others. It may be helpful to tease things
-        // apart more, for example, three separate implementations of IActivityModule and PrepareActivity
-        // which call common code for the setup tasks common to all three. OTOH, in some ways it is simpler
-        // to have it all in one place, and just do the appropriate initialization based on what kind of
-        // draggables we find.
-        this.builtInActivities[
-            "drag-to-destination" // not currently used
-        ] = dragToDestinationModule as IActivityModule;
-        this.builtInActivities[
-            "drag-letter-to-target"
-        ] = dragToDestinationModule as IActivityModule;
-        this.builtInActivities[
-            "drag-image-to-target"
-        ] = dragToDestinationModule as IActivityModule;
-        this.builtInActivities[
-            "drag-sort-sentence"
-        ] = dragToDestinationModule as IActivityModule;
-        this.builtInActivities[
-            "word-chooser-slider" // not used yet
-        ] = dragToDestinationModule as IActivityModule;
-    }
-    public getActivityAbsorbsDragging(): boolean {
-        return (
-            !!this.currentActivity &&
-            !!this.currentActivity.requirements.dragging
-        );
-    }
-    public getActivityAbsorbsClicking(): boolean {
-        return (
-            !!this.currentActivity &&
-            !!this.currentActivity.requirements.clicking
-        );
-    }
-    public getActivityAbsorbsTyping(): boolean {
-        return (
-            !!this.currentActivity && !!this.currentActivity.requirements.typing
-        );
-    }
-    public getActivityManagesSound(): boolean {
-        return (
-            !!this.currentActivity &&
-            !!this.currentActivity.requirements.soundManagement
-        );
-    }
-    private currentActivity: IActivityInformation | undefined;
-    private loadedActivityScripts: {
-        [name: string]: IActivityInformation;
-    } = {};
-
-    private getActivityIdOfPage(pageDiv: HTMLElement) {
-        let activityID = pageDiv.getAttribute("data-activity") || "";
-
-        // Handle "simple comprehension quizzes", which in 4.6 (and maybe into 4.7 and beyond?) don't have data-activity but
-        // instead have a <script> tag. In the Bloom-Player context, that script doesn't do anything,
-        // but it does tell us what the page is supposed to be, so we can just set the activityID
-        // to what it would be if that page was designed with the current activity api.
-        if (activityID === "" && this.hasLegacyQuizScriptTag(pageDiv)) {
-            activityID = simpleCheckboxQuizModule.dataActivityID;
-        }
-        return activityID;
-    }
-
-    private getAnalyticsCategoryOfPage(pageDiv: HTMLElement): string {
-        // About "categories" vs. "category". No great excuse... some day we might
-        // really need to differentiate between, for example,
-        // picture-choose-word and word-choose-picture, while at the same time
-        // being able to combine these scores. Maybe even combine them with
-        // other kinds of tests. It's just not clear yet what is YAGNI. So at
-        // the moment the html data-analyticscategories attribute is plural,
-        // but here in code we know that we currently only handle the whole
-        // thing as a single string, so we just call it "category".
-        return (
-            pageDiv.getAttribute("data-analyticscategories") ||
-            pageDiv.getAttribute("data-analyticsCategories") ||
-            ""
-        );
-    }
-
-    // Do any one-time initialization of the html which will later get dangerously set into the swiper card.
-    // Note that here we are NOT operating on the real DOM which will be present at user-interaction time.
-    // So we can't do things like set up event handlers, etc. Those must be set up in showingPage.
-    // But we can't wait for showingPage to do this first initialization because some work must be done
-    // at book load time. For example, SimpleDomChoice must remove the correct answer highlighting and shuffle
-    // answers BEFORE the user starts to swipe to the page. Otherwise, the correct answer will be seen during the swipe.
-    public initializePageHtml(
-        bookUrlPrefix: string,
-        pageDiv: HTMLElement,
-        pageIndex: number
-    ): void {
-        const activityID = this.getActivityIdOfPage(pageDiv);
-        //const knownActivities = [{id:"iframe", module:iframeModule as IActivityModule}, {id:""}];
-
-        if (!activityID) return; // Not an activity
-
-        if (!this.loadedActivityScripts[activityID])
-            this.prepareActivityType(bookUrlPrefix, activityID);
-
-        this.prepareActivityInstance(pageIndex, pageDiv);
-    }
-
-    // Do any setup needed per activity type (activity ID)
-    private prepareActivityType(bookUrlPrefix: string, activityID: string) {
-        if (this.builtInActivities[activityID]) {
-            this.loadedActivityScripts[activityID] = {
-                name: activityID,
-                module: this.builtInActivities[activityID],
-                runningObject: undefined, // for now were just registering the module, not constructing the object
-                context: undefined,
-                requirements: this.builtInActivities[
-                    activityID
-                ].activityRequirements()
-            };
-        }
-
-        // Try to find the named activity js in the book's folder.
-        else {
-            // Even though we won't use the script until we get to the page,
-            // at the moment we start loading them in the background. This
-            // probably isn't necessary, we could probably wait.
-            loadDynamically(bookUrlPrefix + "/" + activityID + ".js").then(
-                module => {
-                    // if the same activity is encountered multiple times, we
-                    // could still get here multiple times because the load
-                    // is async
-                    if (!this.loadedActivityScripts[activityID]) {
-                        this.loadedActivityScripts[activityID] = {
-                            name: activityID,
-                            module,
-                            runningObject: undefined, // for now were just registering the module, not constructing the object
-                            context: undefined,
-                            requirements: module.activityRequirements()
-                        };
-                    }
-                }
-            );
-        }
-    }
-
-    // Do one-time setup needed per activity instance
-    private prepareActivityInstance(
-        pageIndex: number,
-        pageDiv: HTMLElement
-    ): void {
-        const activity = this.getActivityOfPage(pageDiv);
-        if (!activity) return;
-
-        if (!pageDiv.hasAttribute("data-activity-state")) {
-            // for use in styling things differently during playback versus book editing
-            pageDiv.classList.add("bloom-activityPlayback");
-
-            const activityPage = new ((activity.module!
-                .default as unknown) as IActivityObjectConstructable)(
-                pageDiv
-            ) as IActivityObject;
-            const activityContext = this.getActivityContext(pageIndex, pageDiv);
-            activityPage.initializePageHtml(activityContext);
-
-            // Add an attribute which lets us know we shouldn't prepare it again
-            activityContext.pageElement.setAttribute(
-                "data-activity-state",
-                "prepared"
-            );
-        }
-    }
-
-    public doInitialSoundAndAnimation() {
-        if (this.currentActivity && this.currentActivity.runningObject) {
-            this.currentActivity.runningObject.doInitialSoundAndAnimation?.(
-                this.currentActivity.context!
-            );
-        }
-    }
-
-    // Showing a new page, so stop any previous activity and start any new one that might be on the new page.
-    // returns true if this is a page where we are going to have state in the DOM so that the
-    // container needs to be careful not to get rid of it to save memory.
-    public showingPage(
-        pageIndex: number,
-        bloomPageElement: HTMLElement
-    ): boolean | undefined {
-        // At the moment bloom-player-core will always call us
-        // twice if the book is landscape. Probably that could
-        // be fixed but we might as well just protect ourselves
-        // from starting the same activity twice without stopping it.
-        if (this.previousPageElement === bloomPageElement) {
-            return undefined;
-        }
-        this.previousPageElement = bloomPageElement;
-
-        // Regardless of what we're showing now, first lets stop any activity that
-        // was running on the previous page:
-        if (this.currentActivity && this.currentActivity.module) {
-            this.currentActivity.runningObject!.stop();
-            this.currentActivity.runningObject = undefined;
-            this.currentActivity.context!.stop();
-            this.currentActivity.context = undefined;
-        }
-        this.currentActivity = undefined;
-
-        // OK, let's look at this page and see if has an activity:
-        const activity = this.getActivityOfPage(bloomPageElement);
-        if (activity) {
-            this.currentActivity = activity;
-            // constructing stuff like this has problems with typescript at the moment.
-            // see https://stackoverflow.com/a/13408029/723299
-            // Then the "as unknown" step is make eslint relax
-            activity.runningObject = new ((activity.module!
-                .default as unknown) as IActivityObjectConstructable)(
-                bloomPageElement
-            ) as IActivityObject;
-
-            activity.context = this.getActivityContext(
-                pageIndex,
-                bloomPageElement
-            );
-            activity.runningObject!.showingPage(activity.context);
-        }
-        return !!activity; // return true if this is an activity
-    }
-
-    private getActivityOfPage(
-        bloomPageElement: HTMLElement
-    ): IActivityInformation | undefined {
-        const activityID = this.getActivityIdOfPage(bloomPageElement);
-
-        if (activityID) {
-            // We should have learned about this activity when the book
-            // was first loaded, and dynamically loaded its javascript,
-            // so that it is waiting now to be run
-            const activity = this.loadedActivityScripts[activityID];
-            console.assert(
-                activity,
-                `Trying to start activity "${activityID}" but it wasn't previously loaded.`
-            );
-            return activity;
-        }
-        return undefined;
-    }
-
-    private getActivityContext(
-        pageIndex: number,
-        bloomPageElement: HTMLElement
-    ): ActivityContext {
-        const analyticsCategory = this.getAnalyticsCategoryOfPage(
-            bloomPageElement
-        );
-        return new ActivityContext(
-            pageIndex,
-            bloomPageElement,
-            analyticsCategory,
-            this.bookActivityGroupings[analyticsCategory]
-        );
-    }
-
-    private hasLegacyQuizScriptTag(pageDiv: Element): boolean {
-        const scripts = pageDiv.getElementsByTagName("script");
-        const urls: string[] = [];
-        for (let i = 0; i < scripts.length; i++) {
-            const src = scripts[i].getAttribute("src");
-            if (src && src.endsWith("simpleComprehensionQuiz.js")) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    public collectActivityContextForBook(pages: HTMLCollectionOf<Element>) {
-        for (let index = 0; index < pages.length; index++) {
-            const page = pages[index] as HTMLElement;
-            // Enhance: actually page-api treats the analyticsCategory as a space-delimited string.
-            // If we ever use that feature, we may need to update this collection and analytics processing.
-            // Under the current code, pages would be grouped for analytics if they had the same combination
-            // of category strings. So 'comprehension' pages would be reported separately from
-            // pages with category (e.g.) 'comprehension signLanguage'.
-            const analyticsCategory = this.getAnalyticsCategoryOfPage(page);
-            if (analyticsCategory === "") {
-                continue;
-            }
-            const existing = this.bookActivityGroupings[analyticsCategory];
-            if (existing) {
-                existing.push(index);
-            } else {
-                this.bookActivityGroupings[analyticsCategory] = [index];
-            }
-        }
-    }
-}
+import { loadDynamically } from "./loadDynamically";
+import { ActivityContext } from "./ActivityContext";
+import iframeModule from "./iframeActivity";
+import simpleDomChoiceActivityModule from "./domActivities/SimpleDomChoice";
+import simpleCheckboxQuizModule from "./domActivities/SimpleCheckboxQuiz";
+import dragToDestinationModule from "./dragActivities/DragToDestination";
+
+// This is the module that the activity has to implement (the file must export these functions)
+export interface IActivityModule {
+    // this is a weird typescript thing... the activity just needs to export a class as its default export, and that
+    // class should implement IActivityObject;
+    default: IActivityObject;
+    activityRequirements: () => IActivityRequirements;
+}
+
+// This is the class that the activity module has to implement
+export interface IActivityObject {
+    // Do one-time initialization of the page's html. In the current implementation,
+    // this is acting on a copy of the html, not the real DOM which the user will interact with.
+    // So we can't do things like set up event handlers. (See showingPage below.)
+    initializePageHtml: (context: ActivityContext) => void;
+
+    // Do any setup needed each time the activity becomes the active page.
+    // This is acting on the real DOM, so this is the time to set up event handlers, etc.
+    showingPage: (context: ActivityContext) => void;
+
+    // This is called in place of the normal code that plays sound and animations when the page first appears,
+    // if the activity's requirements specify soundManagement: true.
+    doInitialSoundAndAnimation?: (context: ActivityContext) => void;
+
+    stop: () => void;
+}
+// Constructing stuff from interfaces has problems with typescript at the moment.
+// The class should have this constructor, but should not claim this interface.
+// See https://stackoverflow.com/a/13408029/723299.
+export interface IActivityObjectConstructable {
+    new (element: HTMLElement): IActivityObject;
+}
+export interface IActivityRequirements {
+    dragging?: boolean;
+    clicking?: boolean;
+    typing?: boolean;
+    // suppress normal sound (and music, and animation)
+    // If this is true, the activity should implement doInitialSoundAndAnimation
+    // if anything should autoplay when the page appears.
+    soundManagement?: boolean;
+}
+
+// This is the object (implemented by us, not the activity) that represents our own
+// record of what we know about the activity.
+export interface IActivityInformation {
+    name: string; // from data-activity attribute of the page
+    module: IActivityModule | undefined; // the module of code we loaded from {name}.js
+    runningObject: IActivityObject | undefined; // an instance of the default class exported by the module (but only if it's the current activity)
+    requirements: IActivityRequirements; // returned by the module's activityRequirements() function
+    context: ActivityContext | undefined;
+}
+
+export class ActivityManager {
+    private builtInActivities: { [id: string]: IActivityModule } = {};
+    private previousPageElement: HTMLElement;
+    private bookActivityGroupings: { [id: string]: number[] } = {};
+
+    constructor() {
+        this.builtInActivities["iframe"] = iframeModule as IActivityModule;
+        this.builtInActivities["simple-dom-choice"] =
+            simpleDomChoiceActivityModule as IActivityModule;
+        this.builtInActivities[simpleCheckboxQuizModule.dataActivityID] =
+            simpleCheckboxQuizModule as IActivityModule;
+
+        // Review: currently these all use the same module. A lot of stuff is shared, all the way down to the
+        // prepareActivity() function in dragActivityRuntime. But a good many specialized TOP types are
+        // specific to one of them and not needed for the others. It may be helpful to tease things
+        // apart more, for example, three separate implementations of IActivityModule and PrepareActivity
+        // which call common code for the setup tasks common to all three. OTOH, in some ways it is simpler
+        // to have it all in one place, and just do the appropriate initialization based on what kind of
+        // draggables we find.
+        this.builtInActivities[
+            "drag-to-destination" // not currently used
+        ] = dragToDestinationModule as IActivityModule;
+        this.builtInActivities["drag-letter-to-target"] =
+            dragToDestinationModule as IActivityModule;
+        this.builtInActivities["drag-image-to-target"] =
+            dragToDestinationModule as IActivityModule;
+        this.builtInActivities["drag-sort-sentence"] =
+            dragToDestinationModule as IActivityModule;
+        this.builtInActivities[
+            "word-chooser-slider" // not used yet
+        ] = dragToDestinationModule as IActivityModule;
+    }
+    public getActivityAbsorbsDragging(): boolean {
+        return (
+            !!this.currentActivity &&
+            !!this.currentActivity.requirements.dragging
+        );
+    }
+    public getActivityAbsorbsClicking(): boolean {
+        return (
+            !!this.currentActivity &&
+            !!this.currentActivity.requirements.clicking
+        );
+    }
+    public getActivityAbsorbsTyping(): boolean {
+        return (
+            !!this.currentActivity && !!this.currentActivity.requirements.typing
+        );
+    }
+    public getActivityManagesSound(): boolean {
+        return (
+            !!this.currentActivity &&
+            !!this.currentActivity.requirements.soundManagement
+        );
+    }
+    private currentActivity: IActivityInformation | undefined;
+    private loadedActivityScripts: {
+        [name: string]: IActivityInformation;
+    } = {};
+
+    private getActivityIdOfPage(pageDiv: HTMLElement) {
+        let activityID = pageDiv.getAttribute("data-activity") || "";
+
+        // Handle "simple comprehension quizzes", which in 4.6 (and maybe into 4.7 and beyond?) don't have data-activity but
+        // instead have a <script> tag. In the Bloom-Player context, that script doesn't do anything,
+        // but it does tell us what the page is supposed to be, so we can just set the activityID
+        // to what it would be if that page was designed with the current activity api.
+        if (activityID === "" && this.hasLegacyQuizScriptTag(pageDiv)) {
+            activityID = simpleCheckboxQuizModule.dataActivityID;
+        }
+        return activityID;
+    }
+
+    private getAnalyticsCategoryOfPage(pageDiv: HTMLElement): string {
+        // About "categories" vs. "category". No great excuse... some day we might
+        // really need to differentiate between, for example,
+        // picture-choose-word and word-choose-picture, while at the same time
+        // being able to combine these scores. Maybe even combine them with
+        // other kinds of tests. It's just not clear yet what is YAGNI. So at
+        // the moment the html data-analyticscategories attribute is plural,
+        // but here in code we know that we currently only handle the whole
+        // thing as a single string, so we just call it "category".
+        return (
+            pageDiv.getAttribute("data-analyticscategories") ||
+            pageDiv.getAttribute("data-analyticsCategories") ||
+            ""
+        );
+    }
+
+    // Do any one-time initialization of the html which will later get dangerously set into the swiper card.
+    // Note that here we are NOT operating on the real DOM which will be present at user-interaction time.
+    // So we can't do things like set up event handlers, etc. Those must be set up in showingPage.
+    // But we can't wait for showingPage to do this first initialization because some work must be done
+    // at book load time. For example, SimpleDomChoice must remove the correct answer highlighting and shuffle
+    // answers BEFORE the user starts to swipe to the page. Otherwise, the correct answer will be seen during the swipe.
+    public initializePageHtml(
+        bookUrlPrefix: string,
+        pageDiv: HTMLElement,
+        pageIndex: number,
+    ): void {
+        const activityID = this.getActivityIdOfPage(pageDiv);
+        //const knownActivities = [{id:"iframe", module:iframeModule as IActivityModule}, {id:""}];
+
+        if (!activityID) return; // Not an activity
+
+        if (!this.loadedActivityScripts[activityID])
+            this.prepareActivityType(bookUrlPrefix, activityID);
+
+        this.prepareActivityInstance(pageIndex, pageDiv);
+    }
+
+    // Do any setup needed per activity type (activity ID)
+    private prepareActivityType(bookUrlPrefix: string, activityID: string) {
+        if (this.builtInActivities[activityID]) {
+            this.loadedActivityScripts[activityID] = {
+                name: activityID,
+                module: this.builtInActivities[activityID],
+                runningObject: undefined, // for now were just registering the module, not constructing the object
+                context: undefined,
+                requirements:
+                    this.builtInActivities[activityID].activityRequirements(),
+            };
+        }
+
+        // Try to find the named activity js in the book's folder.
+        else {
+            // Even though we won't use the script until we get to the page,
+            // at the moment we start loading them in the background. This
+            // probably isn't necessary, we could probably wait.
+            loadDynamically(bookUrlPrefix + "/" + activityID + ".js").then(
+                (module) => {
+                    // if the same activity is encountered multiple times, we
+                    // could still get here multiple times because the load
+                    // is async
+                    if (!this.loadedActivityScripts[activityID]) {
+                        this.loadedActivityScripts[activityID] = {
+                            name: activityID,
+                            module,
+                            runningObject: undefined, // for now were just registering the module, not constructing the object
+                            context: undefined,
+                            requirements: module.activityRequirements(),
+                        };
+                    }
+                },
+            );
+        }
+    }
+
+    // Do one-time setup needed per activity instance
+    private prepareActivityInstance(
+        pageIndex: number,
+        pageDiv: HTMLElement,
+    ): void {
+        const activity = this.getActivityOfPage(pageDiv);
+        if (!activity) return;
+
+        if (!pageDiv.hasAttribute("data-activity-state")) {
+            // for use in styling things differently during playback versus book editing
+            pageDiv.classList.add("bloom-activityPlayback");
+
+            const activityPage = new (activity.module!
+                .default as unknown as IActivityObjectConstructable)(
+                pageDiv,
+            ) as IActivityObject;
+            const activityContext = this.getActivityContext(pageIndex, pageDiv);
+            activityPage.initializePageHtml(activityContext);
+
+            // Add an attribute which lets us know we shouldn't prepare it again
+            activityContext.pageElement.setAttribute(
+                "data-activity-state",
+                "prepared",
+            );
+        }
+    }
+
+    public doInitialSoundAndAnimation() {
+        if (this.currentActivity && this.currentActivity.runningObject) {
+            this.currentActivity.runningObject.doInitialSoundAndAnimation?.(
+                this.currentActivity.context!,
+            );
+        }
+    }
+
+    // Showing a new page, so stop any previous activity and start any new one that might be on the new page.
+    // returns true if this is a page where we are going to have state in the DOM so that the
+    // container needs to be careful not to get rid of it to save memory.
+    public showingPage(
+        pageIndex: number,
+        bloomPageElement: HTMLElement,
+    ): boolean | undefined {
+        // At the moment bloom-player-core will always call us
+        // twice if the book is landscape. Probably that could
+        // be fixed but we might as well just protect ourselves
+        // from starting the same activity twice without stopping it.
+        if (this.previousPageElement === bloomPageElement) {
+            return undefined;
+        }
+        this.previousPageElement = bloomPageElement;
+
+        // Regardless of what we're showing now, first lets stop any activity that
+        // was running on the previous page:
+        if (this.currentActivity && this.currentActivity.module) {
+            this.currentActivity.runningObject!.stop();
+            this.currentActivity.runningObject = undefined;
+            this.currentActivity.context!.stop();
+            this.currentActivity.context = undefined;
+        }
+        this.currentActivity = undefined;
+
+        // OK, let's look at this page and see if has an activity:
+        const activity = this.getActivityOfPage(bloomPageElement);
+        if (activity) {
+            this.currentActivity = activity;
+            // constructing stuff like this has problems with typescript at the moment.
+            // see https://stackoverflow.com/a/13408029/723299
+            // Then the "as unknown" step is make eslint relax
+            activity.runningObject = new (activity.module!
+                .default as unknown as IActivityObjectConstructable)(
+                bloomPageElement,
+            ) as IActivityObject;
+
+            activity.context = this.getActivityContext(
+                pageIndex,
+                bloomPageElement,
+            );
+            activity.runningObject!.showingPage(activity.context);
+        }
+        return !!activity; // return true if this is an activity
+    }
+
+    private getActivityOfPage(
+        bloomPageElement: HTMLElement,
+    ): IActivityInformation | undefined {
+        const activityID = this.getActivityIdOfPage(bloomPageElement);
+
+        if (activityID) {
+            // We should have learned about this activity when the book
+            // was first loaded, and dynamically loaded its javascript,
+            // so that it is waiting now to be run
+            const activity = this.loadedActivityScripts[activityID];
+            console.assert(
+                activity,
+                `Trying to start activity "${activityID}" but it wasn't previously loaded.`,
+            );
+            return activity;
+        }
+        return undefined;
+    }
+
+    private getActivityContext(
+        pageIndex: number,
+        bloomPageElement: HTMLElement,
+    ): ActivityContext {
+        const analyticsCategory =
+            this.getAnalyticsCategoryOfPage(bloomPageElement);
+        return new ActivityContext(
+            pageIndex,
+            bloomPageElement,
+            analyticsCategory,
+            this.bookActivityGroupings[analyticsCategory],
+        );
+    }
+
+    private hasLegacyQuizScriptTag(pageDiv: Element): boolean {
+        const scripts = pageDiv.getElementsByTagName("script");
+        const urls: string[] = [];
+        for (let i = 0; i < scripts.length; i++) {
+            const src = scripts[i].getAttribute("src");
+            if (src && src.endsWith("simpleComprehensionQuiz.js")) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    public collectActivityContextForBook(pages: HTMLCollectionOf<Element>) {
+        for (let index = 0; index < pages.length; index++) {
+            const page = pages[index] as HTMLElement;
+            // Enhance: actually page-api treats the analyticsCategory as a space-delimited string.
+            // If we ever use that feature, we may need to update this collection and analytics processing.
+            // Under the current code, pages would be grouped for analytics if they had the same combination
+            // of category strings. So 'comprehension' pages would be reported separately from
+            // pages with category (e.g.) 'comprehension signLanguage'.
+            const analyticsCategory = this.getAnalyticsCategoryOfPage(page);
+            if (analyticsCategory === "") {
+                continue;
+            }
+            const existing = this.bookActivityGroupings[analyticsCategory];
+            if (existing) {
+                existing.push(index);
+            } else {
+                this.bookActivityGroupings[analyticsCategory] = [index];
+            }
+        }
+    }
+}
diff --git a/src/activities/domActivities/SimpleCheckboxQuiz.ts b/src/activities/domActivities/SimpleCheckboxQuiz.ts
index f3cafc9f..efa26645 100644
--- a/src/activities/domActivities/SimpleCheckboxQuiz.ts
+++ b/src/activities/domActivities/SimpleCheckboxQuiz.ts
@@ -1,256 +1,256 @@
-import { ActivityContext } from "../ActivityContext";
-import { IActivityObject } from "../activityManager";
-import styles from "./SimpleCheckboxQuiz.css?inline";
-// The value we store to indicate that at some point the user
-// chose this answer. We don't really need the value, because if the key for
-// that answer has a value, it will be this. But may as well
-// be consistent, in case we later add other options.
-const kChoiceWasSelectedAtOnePoint = "wasSelectedAtOnePoint";
-
-class SimpleCheckboxQuiz implements IActivityObject {
-    private activityContext: ActivityContext;
-    // When a page that has this activity becomes the selected one, the bloom-player calls this.
-    // We need to connect any listeners, start animation, etc. Here,
-    // we are using a javascript class to make sure that we get a fresh start,
-    // which is important because the user could be either
-    // coming back to this page, or going to another instance of this activity
-    // in a subsequent page.
-    // eslint-disable-next-line no-unused-consts
-    constructor(pageElement: HTMLElement) {}
-
-    // Do just those things that we only want to do once per read of the book.
-    public initializePageHtml(activityContext: ActivityContext) {}
-
-    public showingPage(activityContext: ActivityContext) {
-        this.activityContext = activityContext;
-        // tslint:disable-next-line: no-submodule-imports
-        activityContext.addActivityStylesForPage(styles);
-
-        //------------ Code for managing the choice radio buttons -------
-        // Initialize the choice radio buttons, arranging for the appropriate click actions
-        // and for maintaining the class that indicates empty choice.
-        // Assumes the code that sets up the editMode class on the body element if appropriate has already been run.
-
-        // BL-10037 if this code is missing, pre-existing "empty" class may hide answers when we switch to a
-        // language that should have visible answers.
-        this.markEmptyChoices();
-        //const observer = new MutationObserver(markEmptyChoices);
-        //observer.observe(document.body, { characterData: true, subtree: true });
-        const choices = this.activityContext.pageElement.getElementsByClassName(
-            "checkbox-and-textbox-choice",
-        );
-        Array.from(choices).forEach((choice: HTMLElement, index: number) => {
-            const checkbox = this.getCheckBox(choice);
-
-            // ----- This whole file is never loaded in Bloom. For now it is bloom-player only.
-            // ------Therefore we don't need to handle these edit-time events.
-            // ------But it is handy to preserve here what that code needs to do, as we will
-            // ------eventually circle back to this, perhaps unifying all this with the
-            // ------MultipleChoiceDomActivity. That, too, needs a way to mark the correct
-            // ------answer in Bloom Edit Mode (but doesn't have it as of this writing).
-
-            //const correct = choice.classList.contains("correct-answer");
-            // if (this.pageElement.classList.contains("editMode")) {
-            //     checkbox.addEventListener("click", this.handleEditModeClick);
-            //     // Not sure why this doesn't get persisted along with the correct-answer class,
-            //     // but glad it doesn't, because we don't want it to show up even as a flash
-            //     // in reader mode.
-            //     checkbox.checked = correct;
-            // } else {
-
-            this.activityContext.addEventListener(
-                "click",
-                choice,
-                (e) => this.handleReadModeClick(e),
-                {
-                    capture: true,
-                },
-            );
-            // We only need to add these body-level listeners once.
-            if (index === 0) {
-                // I can't find any clear documentation on whether we need all of these or just the pointer ones.
-                for (const eventName of [
-                    "mousedown",
-                    "mousemove",
-                    "pointerdown",
-                    "pointermove",
-                    "touchstart",
-                    "touchmove"
-                ]) {
-                    // The purpose of this is to prevent Swiper allowing the page to be moved or
-                    // flicked when the user is trying to click on a choice.
-                    // Unfortunately it does not work to put a handler on these events for the choice itself.
-                    // Apparently the Swiper is capturing them before they get to the choice.
-                    // So we capture them at a higher level still, but only stop propagation if
-                    // in one of the choices.
-                    this.activityContext.addEventListener(
-                        eventName,
-                        choice.ownerDocument.body,
-                        e => this.handleInputMouseEvent(e),
-                        {
-                            capture: true
-                        }
-                    );
-                }
-            }
-
-            const key = this.getStorageKeyForChoice(choice);
-            if (
-                activityContext.getSessionPageData(key) ===
-                kChoiceWasSelectedAtOnePoint
-            ) {
-                this.choiceWasClicked(choice);
-            } else {
-                checkbox.checked = false; // just to make sure
-            }
-        });
-    }
-
-    private markEmptyChoices(): void {
-        const choices = this.activityContext.pageElement.getElementsByClassName(
-            "checkbox-and-textbox-choice",
-        );
-        for (let i = 0; i < choices.length; i++) {
-            if (this.hasVisibleContent(choices[i])) {
-                choices[i].classList.remove("empty");
-            } else {
-                choices[i].classList.add("empty");
-            }
-        }
-    }
-
-    private hasVisibleContent(choice: Element): boolean {
-        const editables = choice.getElementsByClassName("bloom-editable");
-
-        return Array.from(editables).some(
-            (e) =>
-                e.classList.contains("bloom-visibility-code-on") &&
-                (e.textContent || "").trim() !== "",
-        );
-    }
-    private handleInputMouseEvent(event: Event) {
-        if (
-            (event.target as HTMLElement).closest(
-                ".checkbox-and-textbox-choice"
-            )
-        ) {
-            // Stop Swier from seeing events on these elements.
-            // Note: Swiper version 11 has a class "swiper-no-swiping" that I think can be used to
-            // achieve this, or configured with noSwipingClass or noSwipingSelector.
-            // But we're at too low a version to use that, and bringing in the latest
-            // version is non-trivial.
-            event.stopPropagation();
-            // We don't need to preventDefault to keep Swiper from moving the page,
-            // and we don't want to because I think it would stop the mousedown
-            // from eventually resulting in a click.
-        }
-    }
-
-    private handleReadModeClick(event: Event) {
-        // prevent the browser messing with the check box checked state
-        event.stopPropagation();
-        event.preventDefault();
-        const currentTarget = event.currentTarget as HTMLElement;
-        this.choiceWasClicked(currentTarget);
-        const correct = currentTarget!.classList.contains("correct-answer");
-        if (correct) {
-            this.activityContext.playCorrect();
-        } else {
-            this.activityContext.playWrong();
-        }
-        // The ui shows items that were (selected but wrong) differently than
-        // items that were never tried.
-        const choiceKey = this.getStorageKeyForChoice(currentTarget);
-
-        this.activityContext.storeSessionPageData(
-            choiceKey,
-            kChoiceWasSelectedAtOnePoint,
-        );
-
-        this.activityContext.reportScore(
-            1 /*total possible on page*/,
-            correct ? 1 : 0 /*score*/,
-        );
-    }
-
-    // it was either clicked just now, or we're loading from storage
-    // and we need to make it look like it looked last time we were on this
-    // page
-    private choiceWasClicked(choice) {
-        choice.classList.add(kChoiceWasSelectedAtOnePoint);
-        // Make the state of the hidden input conform. Only if the
-        // correct answer was clicked does the checkbox get checked.
-        const checkBox = this.getCheckBox(choice);
-        // at this point, we only actually make the check happen if
-        // this was the correct answer
-        if (checkBox) {
-            const desiredState1 = choice.classList.contains("correct-answer");
-            checkBox.checked = desiredState1;
-            // Something I can't track down resets it to unchecked
-            // if the user clicks on the input itself. Even with zero delay,
-            // this makes something happen in the next event cycle that
-            // keeps it the way we want.
-            window.setTimeout(() => {
-                return (checkBox.checked = desiredState1);
-            }, 0);
-        }
-    }
-    private getCheckBox(holder) {
-        return holder.firstElementChild;
-    }
-    // When our page is not the selected one, the bloom-player calls this.
-    // It will also tell our context to stop, which will disconnect the listeners we registered with it.
-    public stop() {}
-
-    // Get a key for a checkbox. It only needs to be unique on this page.
-    // Enhance: If a new version of the book is downloaded with a different
-    // set of choices on this page, this sort of positional ID could select
-    // the wrong one. To fix this, we could make something generate a persistent
-    // id for a choice; but the author could still edit the text of the choice,
-    // making the stored choice invalid. Better: find a way to clear the relevant
-    // storage when downloading a new version of a book.
-    private getStorageKeyForChoice(choice: HTMLElement): string {
-        // what is my index among the other choices on the page
-        const choices = Array.from(
-            this.activityContext.pageElement.getElementsByClassName(
-                "checkbox-and-textbox-choice",
-            ),
-        );
-        const choiceIndex = choices.indexOf(choice);
-        return "cbstate_" + choiceIndex;
-    }
-
-    // ----- This whole file is never loaded in Bloom. For now it is bloom-player only.
-    // ------Therefore we don't need to handle these edit-time events.
-    // ------But it is handy to preserve here what that code needs to do, as we will
-    // ------eventually circle back to this, perhaps unifying all this with the
-    // ------MultipleChoiceDomActivity. That, too, needs a way to mark the correct
-    // ------answer in Bloom Edit Mode (but doesn't have it as of this writing).
-
-    // private handleEditModeClick(evt) {
-    //     const target = evt.target;
-    //     if (!target) {
-    //         return;
-    //     }
-    //     const wrapper = evt.currentTarget.parentElement;
-    //     if (target.checked) {
-    //         wrapper.classList.add("correct-answer");
-    //     } else {
-    //         wrapper.classList.remove("correct-answer");
-    //     }
-    // }
-}
-const dataActivityID: string = "simple-checkbox-quiz";
-function activityRequirements() {
-    return {
-        dragging: false,
-        clicking: true,
-        typing: false,
-    };
-}
-// Combine both the class and the function into a single default export
-export default {
-    default: SimpleCheckboxQuiz,
-    activityRequirements,
-    dataActivityID,
-};
+import { ActivityContext } from "../ActivityContext";
+import { IActivityObject } from "../activityManager";
+import styles from "./SimpleCheckboxQuiz.css?inline";
+// The value we store to indicate that at some point the user
+// chose this answer. We don't really need the value, because if the key for
+// that answer has a value, it will be this. But may as well
+// be consistent, in case we later add other options.
+const kChoiceWasSelectedAtOnePoint = "wasSelectedAtOnePoint";
+
+class SimpleCheckboxQuiz implements IActivityObject {
+    private activityContext: ActivityContext;
+    // When a page that has this activity becomes the selected one, the bloom-player calls this.
+    // We need to connect any listeners, start animation, etc. Here,
+    // we are using a javascript class to make sure that we get a fresh start,
+    // which is important because the user could be either
+    // coming back to this page, or going to another instance of this activity
+    // in a subsequent page.
+    // eslint-disable-next-line no-unused-consts
+    constructor(pageElement: HTMLElement) {}
+
+    // Do just those things that we only want to do once per read of the book.
+    public initializePageHtml(activityContext: ActivityContext) {}
+
+    public showingPage(activityContext: ActivityContext) {
+        this.activityContext = activityContext;
+        // tslint:disable-next-line: no-submodule-imports
+        activityContext.addActivityStylesForPage(styles);
+
+        //------------ Code for managing the choice radio buttons -------
+        // Initialize the choice radio buttons, arranging for the appropriate click actions
+        // and for maintaining the class that indicates empty choice.
+        // Assumes the code that sets up the editMode class on the body element if appropriate has already been run.
+
+        // BL-10037 if this code is missing, pre-existing "empty" class may hide answers when we switch to a
+        // language that should have visible answers.
+        this.markEmptyChoices();
+        //const observer = new MutationObserver(markEmptyChoices);
+        //observer.observe(document.body, { characterData: true, subtree: true });
+        const choices = this.activityContext.pageElement.getElementsByClassName(
+            "checkbox-and-textbox-choice",
+        );
+        Array.from(choices).forEach((choice: HTMLElement, index: number) => {
+            const checkbox = this.getCheckBox(choice);
+
+            // ----- This whole file is never loaded in Bloom. For now it is bloom-player only.
+            // ------Therefore we don't need to handle these edit-time events.
+            // ------But it is handy to preserve here what that code needs to do, as we will
+            // ------eventually circle back to this, perhaps unifying all this with the
+            // ------MultipleChoiceDomActivity. That, too, needs a way to mark the correct
+            // ------answer in Bloom Edit Mode (but doesn't have it as of this writing).
+
+            //const correct = choice.classList.contains("correct-answer");
+            // if (this.pageElement.classList.contains("editMode")) {
+            //     checkbox.addEventListener("click", this.handleEditModeClick);
+            //     // Not sure why this doesn't get persisted along with the correct-answer class,
+            //     // but glad it doesn't, because we don't want it to show up even as a flash
+            //     // in reader mode.
+            //     checkbox.checked = correct;
+            // } else {
+
+            this.activityContext.addEventListener(
+                "click",
+                choice,
+                (e) => this.handleReadModeClick(e),
+                {
+                    capture: true,
+                },
+            );
+            // We only need to add these body-level listeners once.
+            if (index === 0) {
+                // I can't find any clear documentation on whether we need all of these or just the pointer ones.
+                for (const eventName of [
+                    "mousedown",
+                    "mousemove",
+                    "pointerdown",
+                    "pointermove",
+                    "touchstart",
+                    "touchmove",
+                ]) {
+                    // The purpose of this is to prevent Swiper allowing the page to be moved or
+                    // flicked when the user is trying to click on a choice.
+                    // Unfortunately it does not work to put a handler on these events for the choice itself.
+                    // Apparently the Swiper is capturing them before they get to the choice.
+                    // So we capture them at a higher level still, but only stop propagation if
+                    // in one of the choices.
+                    this.activityContext.addEventListener(
+                        eventName,
+                        choice.ownerDocument.body,
+                        (e) => this.handleInputMouseEvent(e),
+                        {
+                            capture: true,
+                        },
+                    );
+                }
+            }
+
+            const key = this.getStorageKeyForChoice(choice);
+            if (
+                activityContext.getSessionPageData(key) ===
+                kChoiceWasSelectedAtOnePoint
+            ) {
+                this.choiceWasClicked(choice);
+            } else {
+                checkbox.checked = false; // just to make sure
+            }
+        });
+    }
+
+    private markEmptyChoices(): void {
+        const choices = this.activityContext.pageElement.getElementsByClassName(
+            "checkbox-and-textbox-choice",
+        );
+        for (let i = 0; i < choices.length; i++) {
+            if (this.hasVisibleContent(choices[i])) {
+                choices[i].classList.remove("empty");
+            } else {
+                choices[i].classList.add("empty");
+            }
+        }
+    }
+
+    private hasVisibleContent(choice: Element): boolean {
+        const editables = choice.getElementsByClassName("bloom-editable");
+
+        return Array.from(editables).some(
+            (e) =>
+                e.classList.contains("bloom-visibility-code-on") &&
+                (e.textContent || "").trim() !== "",
+        );
+    }
+    private handleInputMouseEvent(event: Event) {
+        if (
+            (event.target as HTMLElement).closest(
+                ".checkbox-and-textbox-choice",
+            )
+        ) {
+            // Stop Swier from seeing events on these elements.
+            // Note: Swiper version 11 has a class "swiper-no-swiping" that I think can be used to
+            // achieve this, or configured with noSwipingClass or noSwipingSelector.
+            // But we're at too low a version to use that, and bringing in the latest
+            // version is non-trivial.
+            event.stopPropagation();
+            // We don't need to preventDefault to keep Swiper from moving the page,
+            // and we don't want to because I think it would stop the mousedown
+            // from eventually resulting in a click.
+        }
+    }
+
+    private handleReadModeClick(event: Event) {
+        // prevent the browser messing with the check box checked state
+        event.stopPropagation();
+        event.preventDefault();
+        const currentTarget = event.currentTarget as HTMLElement;
+        this.choiceWasClicked(currentTarget);
+        const correct = currentTarget!.classList.contains("correct-answer");
+        if (correct) {
+            this.activityContext.playCorrect();
+        } else {
+            this.activityContext.playWrong();
+        }
+        // The ui shows items that were (selected but wrong) differently than
+        // items that were never tried.
+        const choiceKey = this.getStorageKeyForChoice(currentTarget);
+
+        this.activityContext.storeSessionPageData(
+            choiceKey,
+            kChoiceWasSelectedAtOnePoint,
+        );
+
+        this.activityContext.reportScore(
+            1 /*total possible on page*/,
+            correct ? 1 : 0 /*score*/,
+        );
+    }
+
+    // it was either clicked just now, or we're loading from storage
+    // and we need to make it look like it looked last time we were on this
+    // page
+    private choiceWasClicked(choice) {
+        choice.classList.add(kChoiceWasSelectedAtOnePoint);
+        // Make the state of the hidden input conform. Only if the
+        // correct answer was clicked does the checkbox get checked.
+        const checkBox = this.getCheckBox(choice);
+        // at this point, we only actually make the check happen if
+        // this was the correct answer
+        if (checkBox) {
+            const desiredState1 = choice.classList.contains("correct-answer");
+            checkBox.checked = desiredState1;
+            // Something I can't track down resets it to unchecked
+            // if the user clicks on the input itself. Even with zero delay,
+            // this makes something happen in the next event cycle that
+            // keeps it the way we want.
+            window.setTimeout(() => {
+                return (checkBox.checked = desiredState1);
+            }, 0);
+        }
+    }
+    private getCheckBox(holder) {
+        return holder.firstElementChild;
+    }
+    // When our page is not the selected one, the bloom-player calls this.
+    // It will also tell our context to stop, which will disconnect the listeners we registered with it.
+    public stop() {}
+
+    // Get a key for a checkbox. It only needs to be unique on this page.
+    // Enhance: If a new version of the book is downloaded with a different
+    // set of choices on this page, this sort of positional ID could select
+    // the wrong one. To fix this, we could make something generate a persistent
+    // id for a choice; but the author could still edit the text of the choice,
+    // making the stored choice invalid. Better: find a way to clear the relevant
+    // storage when downloading a new version of a book.
+    private getStorageKeyForChoice(choice: HTMLElement): string {
+        // what is my index among the other choices on the page
+        const choices = Array.from(
+            this.activityContext.pageElement.getElementsByClassName(
+                "checkbox-and-textbox-choice",
+            ),
+        );
+        const choiceIndex = choices.indexOf(choice);
+        return "cbstate_" + choiceIndex;
+    }
+
+    // ----- This whole file is never loaded in Bloom. For now it is bloom-player only.
+    // ------Therefore we don't need to handle these edit-time events.
+    // ------But it is handy to preserve here what that code needs to do, as we will
+    // ------eventually circle back to this, perhaps unifying all this with the
+    // ------MultipleChoiceDomActivity. That, too, needs a way to mark the correct
+    // ------answer in Bloom Edit Mode (but doesn't have it as of this writing).
+
+    // private handleEditModeClick(evt) {
+    //     const target = evt.target;
+    //     if (!target) {
+    //         return;
+    //     }
+    //     const wrapper = evt.currentTarget.parentElement;
+    //     if (target.checked) {
+    //         wrapper.classList.add("correct-answer");
+    //     } else {
+    //         wrapper.classList.remove("correct-answer");
+    //     }
+    // }
+}
+const dataActivityID: string = "simple-checkbox-quiz";
+function activityRequirements() {
+    return {
+        dragging: false,
+        clicking: true,
+        typing: false,
+    };
+}
+// Combine both the class and the function into a single default export
+export default {
+    default: SimpleCheckboxQuiz,
+    activityRequirements,
+    dataActivityID,
+};
diff --git a/src/activities/domActivities/SimpleDomChoice.ts b/src/activities/domActivities/SimpleDomChoice.ts
index ae18bb78..ec7d457a 100644
--- a/src/activities/domActivities/SimpleDomChoice.ts
+++ b/src/activities/domActivities/SimpleDomChoice.ts
@@ -1,120 +1,120 @@
-import { ActivityContext } from "../ActivityContext";
-import { IActivityObject } from "../activityManager";
-
-// This class is intentionally very generic. All it needs is that the html of the
-// page it is given should have some objects (translation groups or images) that have
-// a data-activityRole of either "correct-answer" or "wrong-answer".
-
-// Note that you won't find any code using this directly. Instead,
-// it gets used by the ActivityManager as the default export of this module.
-class MultipleChoiceDomActivity implements IActivityObject {
-    private activityContext: ActivityContext;
-    // When a page that has this activity becomes the selected one, the bloom-player calls this.
-    // We need to connect any listeners, start animation, etc. Here,
-    // we are using a javascript class to make sure that we get a fresh start,
-    // which is important because the user could be either
-    // coming back to this page, or going to another instance of this activity
-    // in a subsequent page.
-    // eslint-disable-next-line no-unused-vars
-    public constructor(public pageElement: HTMLElement) {}
-
-    public showingPage(activityContext: ActivityContext) {
-        this.activityContext = activityContext;
-        this.prepareToDisplayActivityEachTime(activityContext);
-    }
-
-    // Do just those things that we only want to do once per read of the book.
-    // In the current implementation of activityManager, this is operating on a copy of the page html,
-    // NOT the real DOM the user will eventually interact with.
-    public initializePageHtml(activityContext: ActivityContext) {
-        // These flags may be set for the edit-time experience. Remove them now that we're actually going to do the activity.
-        activityContext.pageElement
-            .querySelectorAll(".chosen-correct, .chosen-wrong")
-            .forEach((choiceElement: HTMLElement) => {
-                choiceElement.classList.remove("chosen-correct");
-                choiceElement.classList.remove("chosen-wrong");
-            });
-        // Actual buttons are problematic in the editing mode, so we wrap things with a div.player-button and then here in the player,
-        // we replace that with a real button.
-        activityContext.pageElement
-            .querySelectorAll(".player-button")
-            .forEach((choiceElement: HTMLElement) => {
-                this.replaceWithButton(choiceElement);
-            });
-        // If the activity calls for it, shuffle the buttons
-        activityContext.pageElement
-            .querySelectorAll(".player-shuffle-buttons")
-            .forEach((container: HTMLElement) => {
-                this.shuffleChildren(container);
-            });
-    }
-    private shuffleChildren(container: HTMLElement) {
-        // because sort is supposed to get the same answer every time, we
-        // are doing the randomizing ahead, before the sort.
-        Array.from(container.childNodes)
-            .map((node) => ({ node, randomValue: Math.random() }))
-            .sort((a, b) => a.randomValue - b.randomValue)
-            .forEach(({ node }) => container.appendChild(node));
-    }
-
-    private replaceWithButton(element: HTMLElement): HTMLButtonElement {
-        let button = element.ownerDocument!.createElement("button");
-        for (const attr of Array.prototype.slice.call(element.attributes)) {
-            button.setAttribute(attr.name, attr.value);
-        }
-        button.innerHTML = element.innerHTML;
-        element.replaceWith(button);
-        return button;
-    }
-
-    // The context removes event listeners each time the page is shown, so we have to put them back.
-    private prepareToDisplayActivityEachTime(activityContext: ActivityContext) {
-        activityContext.pageElement
-            .querySelectorAll(".player-button")
-            .forEach((button: HTMLButtonElement) => {
-                const correct =
-                    button.getAttribute("data-activityRole") ===
-                    "correct-answer";
-
-                activityContext.addEventListener(
-                    "click",
-                    button,
-                    correct ? this.onCorrectClick : this.onWrongClick,
-                );
-            });
-    }
-    private onCorrectClick = (evt: Event) => {
-        (evt.currentTarget as HTMLElement).classList.add("chosen-correct");
-        this.activityContext.playCorrect();
-        this.activityContext.reportScore(
-            1 /*total possible on page*/,
-            1 /*score*/,
-        );
-    };
-
-    private onWrongClick = (evt: Event) => {
-        (evt.currentTarget as HTMLElement).classList.add("chosen-wrong");
-        this.activityContext.playWrong();
-        this.activityContext.reportScore(
-            1 /*total possible on page*/,
-            0 /*score*/,
-        );
-    };
-
-    // When our page is not the selected one, the bloom-player calls this.
-    // It will also tell our context to stop, which will disconnect the listeners we registered with it
-    public stop() {}
-}
-
-export function activityRequirements() {
-    return {
-        dragging: true, // we don't actually use dragging, but we are getting accidental drags... maybe the swiper needs to be less sensitive
-        clicking: true, // enhance: maybe when we say we have clicking, the swiper then becomes less sensitive?
-        typing: false,
-    };
-}
-// Combine both the class and the function into a single default export
-export default {
-    default: MultipleChoiceDomActivity,
-    activityRequirements,
-};
+import { ActivityContext } from "../ActivityContext";
+import { IActivityObject } from "../activityManager";
+
+// This class is intentionally very generic. All it needs is that the html of the
+// page it is given should have some objects (translation groups or images) that have
+// a data-activityRole of either "correct-answer" or "wrong-answer".
+
+// Note that you won't find any code using this directly. Instead,
+// it gets used by the ActivityManager as the default export of this module.
+class MultipleChoiceDomActivity implements IActivityObject {
+    private activityContext: ActivityContext;
+    // When a page that has this activity becomes the selected one, the bloom-player calls this.
+    // We need to connect any listeners, start animation, etc. Here,
+    // we are using a javascript class to make sure that we get a fresh start,
+    // which is important because the user could be either
+    // coming back to this page, or going to another instance of this activity
+    // in a subsequent page.
+    // eslint-disable-next-line no-unused-vars
+    public constructor(public pageElement: HTMLElement) {}
+
+    public showingPage(activityContext: ActivityContext) {
+        this.activityContext = activityContext;
+        this.prepareToDisplayActivityEachTime(activityContext);
+    }
+
+    // Do just those things that we only want to do once per read of the book.
+    // In the current implementation of activityManager, this is operating on a copy of the page html,
+    // NOT the real DOM the user will eventually interact with.
+    public initializePageHtml(activityContext: ActivityContext) {
+        // These flags may be set for the edit-time experience. Remove them now that we're actually going to do the activity.
+        activityContext.pageElement
+            .querySelectorAll(".chosen-correct, .chosen-wrong")
+            .forEach((choiceElement: HTMLElement) => {
+                choiceElement.classList.remove("chosen-correct");
+                choiceElement.classList.remove("chosen-wrong");
+            });
+        // Actual buttons are problematic in the editing mode, so we wrap things with a div.player-button and then here in the player,
+        // we replace that with a real button.
+        activityContext.pageElement
+            .querySelectorAll(".player-button")
+            .forEach((choiceElement: HTMLElement) => {
+                this.replaceWithButton(choiceElement);
+            });
+        // If the activity calls for it, shuffle the buttons
+        activityContext.pageElement
+            .querySelectorAll(".player-shuffle-buttons")
+            .forEach((container: HTMLElement) => {
+                this.shuffleChildren(container);
+            });
+    }
+    private shuffleChildren(container: HTMLElement) {
+        // because sort is supposed to get the same answer every time, we
+        // are doing the randomizing ahead, before the sort.
+        Array.from(container.childNodes)
+            .map((node) => ({ node, randomValue: Math.random() }))
+            .sort((a, b) => a.randomValue - b.randomValue)
+            .forEach(({ node }) => container.appendChild(node));
+    }
+
+    private replaceWithButton(element: HTMLElement): HTMLButtonElement {
+        let button = element.ownerDocument!.createElement("button");
+        for (const attr of Array.prototype.slice.call(element.attributes)) {
+            button.setAttribute(attr.name, attr.value);
+        }
+        button.innerHTML = element.innerHTML;
+        element.replaceWith(button);
+        return button;
+    }
+
+    // The context removes event listeners each time the page is shown, so we have to put them back.
+    private prepareToDisplayActivityEachTime(activityContext: ActivityContext) {
+        activityContext.pageElement
+            .querySelectorAll(".player-button")
+            .forEach((button: HTMLButtonElement) => {
+                const correct =
+                    button.getAttribute("data-activityRole") ===
+                    "correct-answer";
+
+                activityContext.addEventListener(
+                    "click",
+                    button,
+                    correct ? this.onCorrectClick : this.onWrongClick,
+                );
+            });
+    }
+    private onCorrectClick = (evt: Event) => {
+        (evt.currentTarget as HTMLElement).classList.add("chosen-correct");
+        this.activityContext.playCorrect();
+        this.activityContext.reportScore(
+            1 /*total possible on page*/,
+            1 /*score*/,
+        );
+    };
+
+    private onWrongClick = (evt: Event) => {
+        (evt.currentTarget as HTMLElement).classList.add("chosen-wrong");
+        this.activityContext.playWrong();
+        this.activityContext.reportScore(
+            1 /*total possible on page*/,
+            0 /*score*/,
+        );
+    };
+
+    // When our page is not the selected one, the bloom-player calls this.
+    // It will also tell our context to stop, which will disconnect the listeners we registered with it
+    public stop() {}
+}
+
+export function activityRequirements() {
+    return {
+        dragging: true, // we don't actually use dragging, but we are getting accidental drags... maybe the swiper needs to be less sensitive
+        clicking: true, // enhance: maybe when we say we have clicking, the swiper then becomes less sensitive?
+        typing: false,
+    };
+}
+// Combine both the class and the function into a single default export
+export default {
+    default: MultipleChoiceDomActivity,
+    activityRequirements,
+};
diff --git a/src/activities/iframeActivity.ts b/src/activities/iframeActivity.ts
index 0ebe0873..77b6e4d2 100644
--- a/src/activities/iframeActivity.ts
+++ b/src/activities/iframeActivity.ts
@@ -1,47 +1,47 @@
-// An "iframe activity" is one where bloom-player doesn't communicate with the
-// activity at all. It just displays the page, with an iframe pointed at some
-// little self-contained web page. This is useful because there are lots of
-// game runtimes and other ways (i.e. Apple's iwidgets) that can thus be embedded
-// in a Bloom page.
-
-import { ActivityContext } from "./ActivityContext";
-import { IActivityObject } from "./activityManager";
-
-// Because we don't actually talk to the activity, this class doesn't do anything,
-// it just adapts the iframe to the bloom-player activity system.
-
-class IframeActivity implements IActivityObject {
-    // When a page that has this activity becomes the selected one, the bloom-player calls this.
-    // We need to connect any listeners, start animation, etc. Here,
-    // we are using a javascript class to make sure that we get a fresh start,
-    // which is important because the user could be either
-    // coming back to this page, or going to another instance of this activity
-    // in a subsequent page.
-    // eslint-disable-next-line no-unused-vars
-    constructor(pageElement: Element) {
-        console.log("iframe activity constructed");
-    }
-    // Do just those things that we only want to do once per read of the book.
-    public initializePageHtml(activityContext: ActivityContext) {}
-    public showingPage() {
-        console.log("iframe activity showingPage");
-    }
-    public stop() {
-        console.log("iframe activity stop");
-    }
-}
-
-// We don't actually know what a particular iframe activity will want, so we assume
-// it wants everything. If desired, we could introduce a data-activity-requirements on the page
-// that would tell us.
-export function activityRequirements() {
-    return {
-        dragging: true,
-        clicking: true,
-        typing: true,
-    };
-}
-export default {
-    default: IframeActivity,
-    activityRequirements,
-};
+// An "iframe activity" is one where bloom-player doesn't communicate with the
+// activity at all. It just displays the page, with an iframe pointed at some
+// little self-contained web page. This is useful because there are lots of
+// game runtimes and other ways (i.e. Apple's iwidgets) that can thus be embedded
+// in a Bloom page.
+
+import { ActivityContext } from "./ActivityContext";
+import { IActivityObject } from "./activityManager";
+
+// Because we don't actually talk to the activity, this class doesn't do anything,
+// it just adapts the iframe to the bloom-player activity system.
+
+class IframeActivity implements IActivityObject {
+    // When a page that has this activity becomes the selected one, the bloom-player calls this.
+    // We need to connect any listeners, start animation, etc. Here,
+    // we are using a javascript class to make sure that we get a fresh start,
+    // which is important because the user could be either
+    // coming back to this page, or going to another instance of this activity
+    // in a subsequent page.
+    // eslint-disable-next-line no-unused-vars
+    constructor(pageElement: Element) {
+        console.log("iframe activity constructed");
+    }
+    // Do just those things that we only want to do once per read of the book.
+    public initializePageHtml(activityContext: ActivityContext) {}
+    public showingPage() {
+        console.log("iframe activity showingPage");
+    }
+    public stop() {
+        console.log("iframe activity stop");
+    }
+}
+
+// We don't actually know what a particular iframe activity will want, so we assume
+// it wants everything. If desired, we could introduce a data-activity-requirements on the page
+// that would tell us.
+export function activityRequirements() {
+    return {
+        dragging: true,
+        clicking: true,
+        typing: true,
+    };
+}
+export default {
+    default: IframeActivity,
+    activityRequirements,
+};
diff --git a/src/activities/legacyQuizHandling/LegacyQuizHandler.ts b/src/activities/legacyQuizHandling/LegacyQuizHandler.ts
index 4fb7f633..1aa4febb 100644
--- a/src/activities/legacyQuizHandling/LegacyQuizHandler.ts
+++ b/src/activities/legacyQuizHandling/LegacyQuizHandler.ts
@@ -1,69 +1,68 @@
-import axios from "axios";
-import { OldQuestionsConverter } from "./old-questions";
-
-// This handles books created before we had actual activity pages; instead the presence of a
-// "questions.json" was the trigger to make pages at the end.
-
-export class LegacyQuestionHandler {
-    public constructor(locationOfDistFolder: string) {
-        this.locationOfDistFolder = locationOfDistFolder;
-    }
-    private needQuizCss = false;
-    private locationOfDistFolder: string;
-    public getPromiseForAnyQuizCss() {
-        return this.needQuizCss
-            ? // enhance: we would like to change this name to "simpleComprehensionQuiz.css", but
-              // we're unsure if that would break something and don't want to deal with it at the
-              // moment. (also Special.less includes simpleComprehensionQuiz.less plus something else?)
-              // And at the moment the "special" is a template book that happens to only have this
-              // quiz, but could contain other things... in any case this "special" is unhelpful.
-              axios.get(this.getFolderForSupportFiles() + "/Special.css")
-            : null;
-    }
-
-    // Prior to Bloom 4.6, quizzes were done by writing out a json file,
-    // rather than having the wysiwyg pages we have now.
-    public generateQuizPagesFromLegacyJSON(
-        urlPrefix,
-        body,
-        pageClass,
-        finished: () => void
-    ) {
-        const urlOfQuestionsFile = urlPrefix + "/questions.json";
-        axios
-            .get(urlOfQuestionsFile)
-            .then(qfResult => {
-                const newPages = OldQuestionsConverter.convert(
-                    qfResult.data,
-                    pageClass
-                );
-                const firstBackMatterPage = body.getElementsByClassName(
-                    "bloom-backMatter"
-                )[0];
-                for (let i = 0; i < newPages.length; i++) {
-                    this.needQuizCss = true;
-                    // insertAdjacentElement is tempting, but not in FF45.
-                    firstBackMatterPage.parentElement!.insertBefore(
-                        newPages[i],
-                        firstBackMatterPage
-                    );
-                }
-                finished();
-            })
-            .catch(() => finished());
-    }
-
-    private getFolderForSupportFiles() {
-        const href =
-            window.location.protocol +
-            "//" +
-            window.location.host +
-            window.location.pathname;
-        const lastSlash = href.lastIndexOf("/");
-        const sub =
-            window["STORYBOOK_ENV"] !== undefined
-                ? "/legacyQuizHandling"
-                : this.locationOfDistFolder;
-        return href.substring(0, lastSlash) + sub;
-    }
-}
+import axios from "axios";
+import { OldQuestionsConverter } from "./old-questions";
+
+// This handles books created before we had actual activity pages; instead the presence of a
+// "questions.json" was the trigger to make pages at the end.
+
+export class LegacyQuestionHandler {
+    public constructor(locationOfDistFolder: string) {
+        this.locationOfDistFolder = locationOfDistFolder;
+    }
+    private needQuizCss = false;
+    private locationOfDistFolder: string;
+    public getPromiseForAnyQuizCss() {
+        return this.needQuizCss
+            ? // enhance: we would like to change this name to "simpleComprehensionQuiz.css", but
+              // we're unsure if that would break something and don't want to deal with it at the
+              // moment. (also Special.less includes simpleComprehensionQuiz.less plus something else?)
+              // And at the moment the "special" is a template book that happens to only have this
+              // quiz, but could contain other things... in any case this "special" is unhelpful.
+              axios.get(this.getFolderForSupportFiles() + "/Special.css")
+            : null;
+    }
+
+    // Prior to Bloom 4.6, quizzes were done by writing out a json file,
+    // rather than having the wysiwyg pages we have now.
+    public generateQuizPagesFromLegacyJSON(
+        urlPrefix,
+        body,
+        pageClass,
+        finished: () => void,
+    ) {
+        const urlOfQuestionsFile = urlPrefix + "/questions.json";
+        axios
+            .get(urlOfQuestionsFile)
+            .then((qfResult) => {
+                const newPages = OldQuestionsConverter.convert(
+                    qfResult.data,
+                    pageClass,
+                );
+                const firstBackMatterPage =
+                    body.getElementsByClassName("bloom-backMatter")[0];
+                for (let i = 0; i < newPages.length; i++) {
+                    this.needQuizCss = true;
+                    // insertAdjacentElement is tempting, but not in FF45.
+                    firstBackMatterPage.parentElement!.insertBefore(
+                        newPages[i],
+                        firstBackMatterPage,
+                    );
+                }
+                finished();
+            })
+            .catch(() => finished());
+    }
+
+    private getFolderForSupportFiles() {
+        const href =
+            window.location.protocol +
+            "//" +
+            window.location.host +
+            window.location.pathname;
+        const lastSlash = href.lastIndexOf("/");
+        const sub =
+            window["STORYBOOK_ENV"] !== undefined
+                ? "/legacyQuizHandling"
+                : this.locationOfDistFolder;
+        return href.substring(0, lastSlash) + sub;
+    }
+}
diff --git a/src/activities/legacyQuizHandling/old-questions.test.ts b/src/activities/legacyQuizHandling/old-questions.test.ts
index d8135d7f..332ef3f9 100644
--- a/src/activities/legacyQuizHandling/old-questions.test.ts
+++ b/src/activities/legacyQuizHandling/old-questions.test.ts
@@ -38,7 +38,7 @@ const converted = OldQuestionsConverter.convert(
             "lang":"sp",
             "onlyForBloomReader1": true}
         ]`,
-    "Device16x9Portrait"
+    "Device16x9Portrait",
 );
 
 test("got three pages", () => {
@@ -54,7 +54,7 @@ test("pages have expected classes", () => {
         expect(div.classList).toContain("numberedPage");
         expect(div.classList).toContain("Device16x9Portrait");
         expect(div.getAttribute("data-analyticsCategories")).toBe(
-            "comprehension"
+            "comprehension",
         );
     }
 });
@@ -75,7 +75,7 @@ const checkTranslationGroup = (
     group: HTMLElement,
     paraContent: string,
     editableStyle: string,
-    lang: string
+    lang: string,
 ) => {
     expect(group.classList).toContain("bloom-translationGroup");
     expect(group.childElementCount).toBe(1);
@@ -99,7 +99,7 @@ test("correct header", () => {
         headerGroup,
         "Check Your Understanding",
         "QuizHeader-style",
-        "sp"
+        "sp",
     );
 });
 
@@ -109,14 +109,14 @@ test("correct questions", () => {
         firstQuestion,
         "How did the boy lose his cap",
         "QuizQuestion-style",
-        "sp"
+        "sp",
     );
     const secondQuestion = getQuestionTranslationGroup(converted[1]);
     checkTranslationGroup(
         secondQuestion,
         "What did the moon do?",
         "QuizQuestion-style",
-        "sp"
+        "sp",
     );
 
     const thirdQuestion = getQuestionTranslationGroup(converted[2]);
@@ -124,7 +124,7 @@ test("correct questions", () => {
         thirdQuestion,
         "Why use old questions?",
         "QuizQuestion-style",
-        "sp"
+        "sp",
     );
 });
 
@@ -137,7 +137,7 @@ const checkAnswer = (
     answer: HTMLElement,
     paraContent: string,
     lang: string,
-    correct: boolean
+    correct: boolean,
 ) => {
     expect(answer.classList).toContain("checkbox-and-textbox-choice");
     if (correct) {
diff --git a/src/activities/legacyQuizHandling/old-questions.ts b/src/activities/legacyQuizHandling/old-questions.ts
index 784aeb88..63361be4 100644
--- a/src/activities/legacyQuizHandling/old-questions.ts
+++ b/src/activities/legacyQuizHandling/old-questions.ts
@@ -38,32 +38,33 @@ export class OldQuestionsConverter {
                 const marginBox = this.appendElementWithClass(
                     "div",
                     "marginBox",
-                    page
+                    page,
                 );
                 const quiz = this.appendElementWithClass(
                     "div",
                     "quiz",
-                    marginBox
+                    marginBox,
                 );
 
-                const checkYourUnderstandingString = LocalizationManager.getTranslation(
-                    "Quiz.CheckYourUnderstanding",
-                    [lang],
-                    "Check Your Understanding"
-                );
+                const checkYourUnderstandingString =
+                    LocalizationManager.getTranslation(
+                        "Quiz.CheckYourUnderstanding",
+                        [lang],
+                        "Check Your Understanding",
+                    );
                 this.appendTranslationGroup(
                     quiz,
                     checkYourUnderstandingString,
                     "QuizHeader-style",
                     lang, // Regardless of whether the string is actually this lang or a fallback, we need to put something and mark it down for {lang}
-                    "Quiz.CheckYourUnderstanding"
+                    "Quiz.CheckYourUnderstanding",
                 );
 
                 this.appendTranslationGroup(
                     quiz,
                     question.question,
                     "QuizQuestion-style",
-                    lang
+                    lang,
                 );
 
                 const answers = question.answers;
@@ -73,13 +74,13 @@ export class OldQuestionsConverter {
                     const answerDiv = this.appendElementWithClass(
                         "div",
                         "checkbox-and-textbox-choice",
-                        quiz
+                        quiz,
                     );
 
                     const input = this.appendElementWithClass(
                         "input",
                         "styled-check-box",
-                        answerDiv
+                        answerDiv,
                     ) as HTMLInputElement;
                     input.setAttribute("name", "Correct");
                     input.setAttribute("type", "checkbox");
@@ -87,19 +88,19 @@ export class OldQuestionsConverter {
                     const answerGroup = this.appendElementWithClass(
                         "div",
                         "bloom-translationGroup",
-                        answerDiv
+                        answerDiv,
                     );
 
                     this.appendElementWithClass(
                         "div",
                         "placeToPutVariableCircle",
-                        answerDiv
+                        answerDiv,
                     );
 
                     const answerEditable = this.appendElementWithClass(
                         "div",
                         "bloom-editable",
-                        answerGroup
+                        answerGroup,
                     );
                     answerEditable.classList.add("bloom-content1");
                     answerEditable.classList.add("bloom-visibility-code-on");
@@ -108,7 +109,7 @@ export class OldQuestionsConverter {
                     const answerPara = this.appendElementWithClass(
                         "p",
                         "",
-                        answerEditable
+                        answerEditable,
                     );
                     answerPara.textContent = answerText;
 
@@ -128,17 +129,17 @@ export class OldQuestionsConverter {
         text: string,
         className: string,
         lang: string,
-        l10nId?: string
+        l10nId?: string,
     ) {
         const group = this.appendElementWithClass(
             "div",
             "bloom-translationGroup",
-            parent
+            parent,
         );
         const editable = this.appendElementWithClass(
             "div",
             "bloom-editable",
-            group
+            group,
         );
         editable.classList.add("bloom-content1");
         editable.classList.add("bloom-visibility-code-on");
@@ -155,7 +156,7 @@ export class OldQuestionsConverter {
     private static appendElementWithClass(
         tag: string,
         className: string,
-        parent: HTMLElement
+        parent: HTMLElement,
     ): HTMLElement {
         const result = document.createElement(tag);
         if (className) {
diff --git a/src/animation.ts b/src/animation.ts
index 24df0b59..c6f19922 100644
--- a/src/animation.ts
+++ b/src/animation.ts
@@ -34,7 +34,9 @@ export class Animation {
     public static getAnimatableImageContainer(page: HTMLElement): HTMLElement {
         return [].slice
             .call(page.getElementsByClassName("bloom-imageContainer"))
-            .find(v => !!(v.dataset as IAnimation).initialrect) as HTMLElement;
+            .find(
+                (v) => !!(v.dataset as IAnimation).initialrect,
+            ) as HTMLElement;
     }
 
     public PlayAnimations: boolean; // true if animation should occur
@@ -53,7 +55,7 @@ export class Animation {
         // Note that if we are not currently animating, this.currentPage may be null or
         // obsolete. It is only used if we need to turn OFF the animation.
         window.addEventListener("orientationchange", () =>
-            window.setTimeout(() => this.adjustWrapDiv(this.currentPage), 200)
+            window.setTimeout(() => this.adjustWrapDiv(this.currentPage), 200),
         );
     }
 
@@ -135,7 +137,7 @@ export class Animation {
         }
         (stylesheet as CSSStyleSheet).insertRule(
             ".bloom-pausable {animation-play-state: paused; -webkit-animation-play-state: paused}",
-            (stylesheet as CSSStyleSheet).cssRules.length
+            (stylesheet as CSSStyleSheet).cssRules.length,
         );
         this.permanentRuleCount++; // not really permanent, but not to be messed with.
     }
@@ -148,9 +150,8 @@ export class Animation {
         if (!beforeVisible) {
             this.pageJustMadeVisible = page;
         }
-        const animatableImageContainer = Animation.getAnimatableImageContainer(
-            page
-        );
+        const animatableImageContainer =
+            Animation.getAnimatableImageContainer(page);
         if (!animatableImageContainer) {
             return; // no image to animate
         }
@@ -182,7 +183,7 @@ export class Animation {
             // Note that this copies all the classes, so we need to be careful that css based
             // on the classes works as expected with/without hidePage.
             hidePageDiv = animatableImageContainer.cloneNode(
-                true
+                true,
             ) as HTMLDivElement;
             hidePageDiv.classList.add("hidePage");
             this.animationView = hidePageDiv;
@@ -209,7 +210,7 @@ export class Animation {
                     movingDiv.style.backgroundColor = "white";
                     styleAttr.backgroundImage = "";
                     imageSrc = DomHelper.getActualUrlFromCSSPropertyValue(
-                        movingDiv.style.backgroundImage
+                        movingDiv.style.backgroundImage,
                     );
                 }
                 const image = new Image();
@@ -218,13 +219,13 @@ export class Animation {
                         // some browsers may not produce this?
                         wrapDiv!.setAttribute(
                             "data-aspectRatio",
-                            (image.width / image.height).toString()
+                            (image.width / image.height).toString(),
                         );
                     } else {
                         // can't get accurate size for some reason, use fall-back.
                         wrapDiv!.setAttribute(
                             "data-aspectRatio",
-                            (16 / 9).toString()
+                            (16 / 9).toString(),
                         );
                     }
                     this.updateWrapDivSize(wrapDiv!);
@@ -235,13 +236,13 @@ export class Animation {
                     this.insertAnimationRules(
                         page,
                         wrapDiv!,
-                        beforeVisible && page !== this.pageJustMadeVisible
+                        beforeVisible && page !== this.pageJustMadeVisible,
                     );
                     const oldStyle = wrapDiv!.getAttribute("style")!;
                     // now we can show it.
                     wrapDiv!.setAttribute(
                         "style",
-                        oldStyle.substring("visibility: hidden; ".length)
+                        oldStyle.substring("visibility: hidden; ".length),
                     );
                 });
                 // trigger loading the image (which is not used except for the code above that listens for
@@ -258,7 +259,7 @@ export class Animation {
                 const oldStyle = wrapDiv.getAttribute("style")!;
                 wrapDiv.setAttribute(
                     "style",
-                    oldStyle.substring("visibility: hidden; ".length)
+                    oldStyle.substring("visibility: hidden; ".length),
                 );
             }
 
@@ -315,7 +316,7 @@ export class Animation {
     private insertAnimationRules(
         page: HTMLElement,
         wrapDiv: HTMLElement,
-        beforeVisible: boolean
+        beforeVisible: boolean,
     ) {
         // Assign each animation div a unique number so their rules are distinct.
         // We also need a new number at least any time we're actually starting the animation, otherwise,
@@ -335,15 +336,16 @@ export class Animation {
         // sometimes has to wait until we get the aspect ratio of the image.
         const stylesheet = this.getAnimationStylesheet().sheet;
         // tslint is so surprised by this cast that it complains without the preliminary "as any"
-        const initialRectStr = ((this.animationView
-            .dataset as any) as IAnimation).initialrect;
+        const initialRectStr = (this.animationView.dataset as any as IAnimation)
+            .initialrect;
 
         //Fetch the data from the dataset and reformat into scale width and height along with offset x and y
         const initialRect = initialRectStr.split(" ");
         const initialScaleWidth = 1 / parseFloat(initialRect[2]);
         const initialScaleHeight = 1 / parseFloat(initialRect[3]);
-        const finalRect = ((this.animationView
-            .dataset as any) as IAnimation).finalrect.split(" ");
+        const finalRect = (
+            this.animationView.dataset as any as IAnimation
+        ).finalrect.split(" ");
         const finalScaleWidth = 1 / parseFloat(finalRect[2]);
         const finalScaleHeight = 1 / parseFloat(finalRect[3]);
 
@@ -357,7 +359,7 @@ export class Animation {
             (stylesheet as CSSStyleSheet).deleteRule(
                 (stylesheet as CSSStyleSheet).cssRules.length -
                     this.permanentRuleCount -
-                    1
+                    1,
             );
         }
         const wrapDivWidth = wrapDiv.clientWidth;
@@ -409,7 +411,7 @@ export class Animation {
                     " { transform-origin: 0px 0px; transform: " +
                     initialTransform +
                     ";}",
-                0
+                0,
             );
         } else {
             //Insert the keyframe animation rule with the dynamic begin and end set
@@ -421,7 +423,7 @@ export class Animation {
                     "; } to{ transform-origin: 0px 0px; transform: " +
                     finalTransform +
                     "; } }",
-                0
+                0,
             );
 
             //Insert the css for the imageView div that utilizes the newly created animation
@@ -442,7 +444,7 @@ export class Animation {
                     (this.animationDuration + 1) +
                     "s; animation-fill-mode: forwards; " +
                     "animation-timing-function: linear;}",
-                1
+                1,
             );
         }
         // Give this rule the class bloom-animate to trigger the rule created in getAnimationStylesheet,
@@ -452,7 +454,7 @@ export class Animation {
         const movingDiv = wrapDiv.childNodes[0] as HTMLElement;
         movingDiv.setAttribute(
             "class",
-            "bloom-animate bloom-pausable " + animateStyleName
+            "bloom-animate bloom-pausable " + animateStyleName,
         );
     }
 
@@ -462,7 +464,7 @@ export class Animation {
     // So we can ignore that factor.
     private updateWrapDivSize(wrapDiv: HTMLElement) {
         const imageAspectRatio = parseFloat(
-            wrapDiv.getAttribute("data-aspectRatio")!
+            wrapDiv.getAttribute("data-aspectRatio")!,
         );
         const viewWidth = this.animationView.clientWidth; // getBoundingClientRect().width;
         const viewHeight = this.animationView.clientHeight; // getBoundingClientRect().height;
@@ -484,7 +486,7 @@ export class Animation {
                     imageWidth +
                     "px; left: " +
                     (viewWidth - imageWidth) / 2 +
-                    "px"
+                    "px",
             );
         } else {
             // black bars top and bottom
@@ -496,7 +498,7 @@ export class Animation {
                     imageHeight +
                     "px; top: " +
                     (viewHeight - imageHeight) / 2 +
-                    "px"
+                    "px",
             );
         }
     }
diff --git a/src/autonyms.ts b/src/autonyms.ts
index 37f67735..3755039e 100644
--- a/src/autonyms.ts
+++ b/src/autonyms.ts
@@ -51,9 +51,10 @@ export class AutonymHandler {
     }
 
     // Returns an object containing two strings: autonym and English name
-    public getAutonymDataFor(
-        code: string
-    ): { autonym: string; english: string } {
+    public getAutonymDataFor(code: string): {
+        autonym: string;
+        english: string;
+    } {
         const failure = { autonym: "", english: "" };
         //console.log("Processing code to get autonym data...");
         const threeLetterIsoCode = this.getThreeLetterIsoCode(code);
diff --git a/src/bloom-player-core.tsx b/src/bloom-player-core.tsx
index b267512d..880acce1 100644
--- a/src/bloom-player-core.tsx
+++ b/src/bloom-player-core.tsx
@@ -349,7 +349,7 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
             "pointerdown",
             "pointermove",
             "touchstart",
-            "touchmove"
+            "touchmove",
         ]) {
             // The purpose of this is to prevent Swiper allowing the page to be moved or
             // flicked when the user is trying to click on a video control.
@@ -358,7 +358,7 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
             // So we capture them at a higher level still, but only stop propagation if
             // in one of the choices.
             document.body.addEventListener(eventName, handleInputMouseEvent, {
-                capture: true
+                capture: true,
             });
         }
 
@@ -428,7 +428,7 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
             href: href,
             // used for backreference to the page that initiated the navigation
             sourceUrl: this.sourceUrl,
-            sourcePageNumber: page?.getAttribute("data-page-number")
+            sourcePageNumber: page?.getAttribute("data-page-number"),
         });
         e.preventDefault();
         e.stopPropagation();
@@ -792,22 +792,20 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
     // See BL-13796.
     public static fixNiceScrollOffsets(page: HTMLElement, scale: number) {
         page.querySelectorAll(kSelectorForPotentialNiceScrollElements).forEach(
-            group => {
+            (group) => {
                 // The type definition is not correct for getNiceScroll; we expect it to return an array.
                 const groupNiceScroll = $(group).getNiceScroll() as any;
                 if (groupNiceScroll && groupNiceScroll.length > 0) {
-                    let {
-                        topAdjust,
-                        leftAdjust
-                    } = BloomPlayerCore.ComputeNiceScrollOffsets(
-                        scale,
-                        group as HTMLElement
-                    );
+                    let { topAdjust, leftAdjust } =
+                        BloomPlayerCore.ComputeNiceScrollOffsets(
+                            scale,
+                            group as HTMLElement,
+                        );
                     groupNiceScroll[0].opt.railoffset.top = -topAdjust;
                     groupNiceScroll[0].opt.railoffset.left = -leftAdjust;
                     groupNiceScroll[0].resize();
                 }
-            }
+            },
         );
     }
 
@@ -2653,20 +2651,18 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
                     // the scale from the transform property.  See BL-13796.
                     let scale = 1;
                     const scaleStyle = document.querySelector(
-                        "style#scale-style-sheet"
+                        "style#scale-style-sheet",
                     );
                     if (scaleStyle) {
                         const match = scaleStyle.innerHTML.match(
-                            /transform:[a-z0-9, ()]* scale\((\d+(\.\d+)?)\)/
+                            /transform:[a-z0-9, ()]* scale\((\d+(\.\d+)?)\)/,
                         );
                         if (match) {
                             scale = parseFloat(match[1]);
                         }
                     }
-                    let {
-                        topAdjust,
-                        leftAdjust
-                    } = BloomPlayerCore.ComputeNiceScrollOffsets(scale, elt);
+                    let { topAdjust, leftAdjust } =
+                        BloomPlayerCore.ComputeNiceScrollOffsets(scale, elt);
                     // We don't really want continuous observation, but this is an elegant
                     // way to find out whether each child is entirely contained within its
                     // parent. Unlike computations involving coordinates, we don't have to
@@ -2787,7 +2783,7 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
                                         autohidemode: false,
                                         railoffset: {
                                             top: -topAdjust,
-                                            left: -leftAdjust
+                                            left: -leftAdjust,
                                         },
                                         cursorwidth: "12px",
                                         cursorcolor: "#000000",
diff --git a/src/bloomPlayerAnalytics.tsx b/src/bloomPlayerAnalytics.tsx
index 0cbe8eea..f26cb279 100644
--- a/src/bloomPlayerAnalytics.tsx
+++ b/src/bloomPlayerAnalytics.tsx
@@ -9,7 +9,7 @@ import { Environment } from "./Environment";
 // Note that this file is adapted from the one used by BloomLibrary2.
 /* eslint-disable */
 /* tslint:disable */
-(function() {
+(function () {
     // tslint:disable-next-line: prefer-const
     var analytics = ((window as any).analytics =
         (window as any).analytics || []);
@@ -40,10 +40,10 @@ import { Environment } from "./Environment";
                 "addSourceMiddleware",
                 "addIntegrationMiddleware",
                 "setAnonymousId",
-                "addDestinationMiddleware"
+                "addDestinationMiddleware",
             ];
-            analytics.factory = function(e: any) {
-                return function() {
+            analytics.factory = function (e: any) {
+                return function () {
                     var t = Array.prototype.slice.call(arguments);
                     t.unshift(e);
                     analytics.push(t);
@@ -54,7 +54,7 @@ import { Environment } from "./Environment";
                 var t = analytics.methods[e];
                 analytics[t] = analytics.factory(t);
             }
-            analytics.load = function(e: any, t: any) {
+            analytics.load = function (e: any, t: any) {
                 var n = document.createElement("script");
                 n.type = "text/javascript";
                 n.async = !0;
diff --git a/src/bloomPlayerTheme.ts b/src/bloomPlayerTheme.ts
index f4e50683..4160c284 100644
--- a/src/bloomPlayerTheme.ts
+++ b/src/bloomPlayerTheme.ts
@@ -7,8 +7,8 @@ export const bloomYellow = "#febf00"; // also in bloom-player-content.less
 const theme = createTheme({
     palette: {
         primary: { main: bloomGrey, contrastText: bloomRed },
-        secondary: { main: bloomRed }
-    }
+        secondary: { main: bloomRed },
+    },
 });
 
 export default theme;
diff --git a/src/bookInfo.test.ts b/src/bookInfo.test.ts
index 658e8a76..85e0f195 100644
--- a/src/bookInfo.test.ts
+++ b/src/bookInfo.test.ts
@@ -9,7 +9,7 @@ const cases = [
     ["blind, talkingBook", "talkingBook", true],
     ["talkingBook:en", "talkingBook", true],
     ["", "blind", false],
-    ["blind", "talkingBook", false]
+    ["blind", "talkingBook", false],
 ];
 test.each(cases)(
     "hasFeature",
@@ -17,11 +17,11 @@ test.each(cases)(
         const bookInfo = new BookInfo();
         bookInfo.setSomeBookInfoFromMetadata(
             { features: featuresString, bloomdVersion: 1 },
-            document.body as HTMLBodyElement
+            document.body as HTMLBodyElement,
         );
 
         expect(bookInfo.hasFeature(input)).toEqual(expected);
-    }
+    },
 );
 
 test("setSomeBookInfoFromHead defaults verified", () => {
@@ -73,19 +73,19 @@ test("setSomeBookInfoFromBody values set", () => {
         key: "contentLanguage1",
         lang: "*",
         content: "es",
-        parent: dataDiv
+        parent: dataDiv,
     });
     const copyrightDiv = createDataDivItem({
         key: "copyright",
         lang: "*",
         content: "Copyright © 2019, this guy",
-        parent: dataDiv
+        parent: dataDiv,
     });
     const origCopyrightDiv = createDataDivItem({
         key: "originalCopyright",
         lang: "*",
         content: "Copyright © 2019, The original guy",
-        parent: dataDiv
+        parent: dataDiv,
     });
 
     const bookInfo = new BookInfo();
@@ -99,7 +99,7 @@ test("setSomeBookInfoFromBody values set", () => {
     expect(ambientAnalyticsProps.contentLang).toEqual("es");
     expect(ambientAnalyticsProps.copyrightHolder).toEqual("this guy");
     expect(ambientAnalyticsProps.originalCopyrightHolder).toEqual(
-        "The original guy"
+        "The original guy",
     );
 });
 
@@ -114,7 +114,7 @@ test("setSomeBookInfoFromMetadata", () => {
         publisher: "my publisher",
         originalPublisher: "my original publisher",
         features: "blind,talkingBook",
-        bloomdVersion: "1"
+        bloomdVersion: "1",
     };
     const body = document.body as HTMLBodyElement;
 
@@ -127,7 +127,7 @@ test("setSomeBookInfoFromMetadata", () => {
     expect(ambientAnalyticsProps.originalTitle).toEqual("My Original Title");
     expect(ambientAnalyticsProps.publisher).toEqual("my publisher");
     expect(ambientAnalyticsProps.originalPublisher).toEqual(
-        "my original publisher"
+        "my original publisher",
     );
     expect(ambientAnalyticsProps.features).toEqual("blind,talkingBook");
     expect(ambientAnalyticsProps.bookshelves).toEqual("");
@@ -140,8 +140,8 @@ test("setSomeBookInfoFromMetadata_bookshelvesFromTags", () => {
         tags: [
             "bookshelf:my bookshelf",
             "otherTag:my other tag",
-            "bookshelf:my other bookshelf"
-        ]
+            "bookshelf:my other bookshelf",
+        ],
     };
     const body = document.body as HTMLBodyElement;
 
@@ -149,7 +149,7 @@ test("setSomeBookInfoFromMetadata_bookshelvesFromTags", () => {
 
     const ambientAnalyticsProps = bookInfo.getAmbientAnalyticsProps();
     expect(ambientAnalyticsProps.bookshelves).toEqual(
-        "my bookshelf,my other bookshelf"
+        "my bookshelf,my other bookshelf",
     );
 });
 
@@ -157,7 +157,7 @@ test("setSomeBookInfoFromMetadata_bookshelvesFromBookshelvesField", () => {
     const bookInfo = new BookInfo();
 
     const metadata = {
-        bookshelves: ["my bookshelf", "my other bookshelf"]
+        bookshelves: ["my bookshelf", "my other bookshelf"],
     };
     const body = document.body as HTMLBodyElement;
 
@@ -165,7 +165,7 @@ test("setSomeBookInfoFromMetadata_bookshelvesFromBookshelvesField", () => {
 
     const ambientAnalyticsProps = bookInfo.getAmbientAnalyticsProps();
     expect(ambientAnalyticsProps.bookshelves).toEqual(
-        "my bookshelf,my other bookshelf"
+        "my bookshelf,my other bookshelf",
     );
 });
 
@@ -177,8 +177,8 @@ test("setSomeBookInfoFromMetadata_bookshelvesFromTagsAndBookshelvesField", () =>
         tags: [
             "bookshelf:my bookshelf",
             "otherTag:my other tag",
-            "bookshelf:my other bookshelf"
-        ]
+            "bookshelf:my other bookshelf",
+        ],
     };
     const body = document.body as HTMLBodyElement;
 
@@ -186,7 +186,7 @@ test("setSomeBookInfoFromMetadata_bookshelvesFromTagsAndBookshelvesField", () =>
 
     const ambientAnalyticsProps = bookInfo.getAmbientAnalyticsProps();
     expect(ambientAnalyticsProps.bookshelves).toEqual(
-        "my bookshelf,my other bookshelf 2,my other bookshelf"
+        "my bookshelf,my other bookshelf 2,my other bookshelf",
     );
 });
 
@@ -197,7 +197,8 @@ test("getPreferredTranslationLanguages, 1 language", () => {
     [lang='aaa']`;
     const bookInfo = createBookInfoWithLanguages("aaa", cssText);
 
-    const preferredTranslationLanguages = bookInfo.getPreferredTranslationLanguages();
+    const preferredTranslationLanguages =
+        bookInfo.getPreferredTranslationLanguages();
     expect(preferredTranslationLanguages.length).toEqual(1);
     expect(preferredTranslationLanguages[0]).toEqual("aaa");
 });
@@ -210,7 +211,8 @@ test("getPreferredTranslationLanguages, 2 languages", () => {
     [lang='bbb']`;
     const bookInfo = createBookInfoWithLanguages("aaa", cssText);
 
-    const preferredTranslationLanguages = bookInfo.getPreferredTranslationLanguages();
+    const preferredTranslationLanguages =
+        bookInfo.getPreferredTranslationLanguages();
     expect(preferredTranslationLanguages.length).toEqual(2);
     expect(preferredTranslationLanguages[0]).toEqual("aaa");
     expect(preferredTranslationLanguages[1]).toEqual("bbb");
@@ -225,7 +227,8 @@ test("getPreferredTranslationLanguages, 3 languages", () => {
     [lang='ccc']`;
     const bookInfo = createBookInfoWithLanguages("aaa", cssText);
 
-    const preferredTranslationLanguages = bookInfo.getPreferredTranslationLanguages();
+    const preferredTranslationLanguages =
+        bookInfo.getPreferredTranslationLanguages();
     expect(preferredTranslationLanguages.length).toEqual(3);
     expect(preferredTranslationLanguages[0]).toEqual("aaa");
     expect(preferredTranslationLanguages[1]).toEqual("bbb");
@@ -240,7 +243,7 @@ function createBookInfoWithLanguages(lang1: string, cssText: string): BookInfo {
         key: "contentLanguage1",
         lang: "*",
         content: lang1,
-        parent: dataDiv
+        parent: dataDiv,
     });
     const bookInfo = new BookInfo();
     bookInfo.setSomeBookInfoFromBody(body);
diff --git a/src/bookInfo.ts b/src/bookInfo.ts
index 94112223..0ea69f8b 100644
--- a/src/bookInfo.ts
+++ b/src/bookInfo.ts
@@ -5,7 +5,7 @@ enum BookFeatures {
     talkingBook = "talkingBook",
     blind = "blind",
     signLanguage = "signLanguage",
-    motion = "motion"
+    motion = "motion",
 }
 
 export class BookInfo {
@@ -53,7 +53,7 @@ export class BookInfo {
 
     private static getCopyrightInfo(
         body: HTMLBodyElement,
-        dataDivKey: string
+        dataDivKey: string,
     ): string {
         const copyrightNoticeRE = /^Copyright © \d\d\d\d, /;
         const copyright = this.getDataDivValue(body, dataDivKey);
@@ -62,14 +62,14 @@ export class BookInfo {
 
     private static getDataDivValue(
         body: HTMLBodyElement,
-        dataDivKey: string
+        dataDivKey: string,
     ): string {
         const node = body.ownerDocument!.evaluate(
             ".//div[@data-book='" + dataDivKey + "']",
             body,
             null,
             XPathResult.ANY_UNORDERED_NODE_TYPE,
-            null
+            null,
         ).singleNodeValue;
         if (!node) {
             return "";
@@ -105,7 +105,7 @@ export class BookInfo {
             copyrightHolder: this.copyrightHolder,
             publisher: this.publisher,
             originalPublisher: this.originalPublisher,
-            bookshelves: this.bookshelves
+            bookshelves: this.bookshelves,
         };
         // BloomLibrary2 and BloomReader both set this query parameter appropriately.
         const host = getQueryStringParamAndUnencode("host", null);
@@ -139,13 +139,13 @@ export class BookInfo {
         this.copyrightHolder = BookInfo.getCopyrightInfo(body, "copyright");
         this.originalCopyrightHolder = BookInfo.getCopyrightInfo(
             body,
-            "originalCopyright"
+            "originalCopyright",
         );
     }
 
     public setSomeBookInfoFromMetadata(
         metaDataObject: any,
-        body: HTMLBodyElement
+        body: HTMLBodyElement,
     ): void {
         this.bookInstanceId = metaDataObject.bookInstanceId;
         this.brandingProjectName = metaDataObject.brandingProjectName;
@@ -155,7 +155,7 @@ export class BookInfo {
         this.originalPublisher = metaDataObject.originalPublisher;
         this.bookshelves = this.getBookshelves(
             metaDataObject.tags,
-            metaDataObject.bookshelves
+            metaDataObject.bookshelves,
         );
 
         const bloomdVersion = metaDataObject.bloomdVersion
@@ -169,7 +169,7 @@ export class BookInfo {
 
     private getBookshelves(
         tagsField: Array<string>,
-        bookshelvesField: Array<string>
+        bookshelvesField: Array<string>,
     ): string {
         // The bookshelves field is untested.
         // As of Jul 2021, we only put bookshelves in meta.json in the tags field.
@@ -177,10 +177,10 @@ export class BookInfo {
         // and separate bookshelves field which already exists in parse.
         // Assumption: items in the bookshelves field will be unique.
         const bookshelvesSet: Array<string> = Array.from(
-            bookshelvesField ?? []
+            bookshelvesField ?? [],
         );
         if (tagsField) {
-            tagsField.forEach(tag => {
+            tagsField.forEach((tag) => {
                 if (tag.startsWith("bookshelf:")) {
                     const bookshelf = tag.substring("bookshelf:".length).trim();
                     if (!bookshelvesSet.includes(bookshelf)) {
@@ -193,10 +193,8 @@ export class BookInfo {
     }
 
     public setLanguage2And3(data: any): void {
-        [
-            this.bookLanguage2,
-            this.bookLanguage3
-        ] = LocalizationUtils.getNationalLanguagesFromCssStyles(data);
+        [this.bookLanguage2, this.bookLanguage3] =
+            LocalizationUtils.getNationalLanguagesFromCssStyles(data);
     }
 
     // In July 2019, Bloom Desktop added a bloomdVersion to meta.json and at the same
@@ -221,11 +219,11 @@ export class BookInfo {
                 body,
                 null,
                 XPathResult.ANY_UNORDERED_NODE_TYPE,
-                null
+                null,
             ).singleNodeValue != null;
         const motion =
             (body.getAttribute("data-bffullscreenpicture") || "").indexOf(
-                "landscape;bloomReader"
+                "landscape;bloomReader",
             ) >= 0;
         const blind =
             body.ownerDocument!.evaluate(
@@ -233,7 +231,7 @@ export class BookInfo {
                 body,
                 null,
                 XPathResult.ANY_UNORDERED_NODE_TYPE,
-                null
+                null,
             ).singleNodeValue != null;
         const isTalkingBook =
             body.ownerDocument!.evaluate(
@@ -241,7 +239,7 @@ export class BookInfo {
                 body,
                 null,
                 XPathResult.ANY_UNORDERED_NODE_TYPE,
-                null
+                null,
             ).singleNodeValue != null;
         // Note: the order of features here matches Bloom's BookMetaData.Features getter,
         // so the features will be in the same order as when output from there.
@@ -265,7 +263,7 @@ export class BookInfo {
         // Public Domain/MIT (stackoverflow)
         let d = new Date().getTime();
 
-        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
             // tslint:disable-next-line: no-bitwise
             const r = (d + Math.random() * 16) % 16 | 0;
             d = Math.floor(d / 16);
diff --git a/src/bookInteraction.test.ts b/src/bookInteraction.test.ts
index 5729ff6e..c91ce2ac 100644
--- a/src/bookInteraction.test.ts
+++ b/src/bookInteraction.test.ts
@@ -3,7 +3,8 @@ import { BookInteraction } from "./bookInteraction";
 test("pagesShown getProgressReportPropertiesForAnalytics", () => {
     const bookInteraction = new BookInteraction();
 
-    let progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    let progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(progressReportPropertiesForAnalytics.audioPages).toEqual(0);
     expect(progressReportPropertiesForAnalytics.nonAudioPages).toEqual(0);
     expect(progressReportPropertiesForAnalytics.videoPages).toEqual(0);
@@ -18,14 +19,16 @@ test("pagesShown getProgressReportPropertiesForAnalytics", () => {
     bookInteraction.audioPageShown(4);
     bookInteraction.videoPageShown(1);
 
-    progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(progressReportPropertiesForAnalytics.audioPages).toEqual(2);
     expect(progressReportPropertiesForAnalytics.nonAudioPages).toEqual(3);
     expect(progressReportPropertiesForAnalytics.videoPages).toEqual(1);
 
     bookInteraction.clearPagesShown();
 
-    progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(progressReportPropertiesForAnalytics.audioPages).toEqual(0);
     expect(progressReportPropertiesForAnalytics.nonAudioPages).toEqual(0);
     expect(progressReportPropertiesForAnalytics.videoPages).toEqual(0);
@@ -33,22 +36,25 @@ test("pagesShown getProgressReportPropertiesForAnalytics", () => {
 
 test("lastNumberedPageWasRead", () => {
     const bookInteraction = new BookInteraction();
-    let progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    let progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(
-        progressReportPropertiesForAnalytics.lastNumberedPageRead
+        progressReportPropertiesForAnalytics.lastNumberedPageRead,
     ).toBeFalsy();
 
     bookInteraction.lastNumberedPageWasRead = true;
 
-    progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(
-        progressReportPropertiesForAnalytics.lastNumberedPageRead
+        progressReportPropertiesForAnalytics.lastNumberedPageRead,
     ).toBeTruthy();
 });
 
 test("totalAudioDuration and totalVideoDuration", () => {
     const bookInteraction = new BookInteraction();
-    let progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    let progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(progressReportPropertiesForAnalytics.audioDuration).toEqual(0);
     expect(progressReportPropertiesForAnalytics.videoDuration).toEqual(0);
 
@@ -57,7 +63,8 @@ test("totalAudioDuration and totalVideoDuration", () => {
 
     bookInteraction.totalVideoDuration += 100;
 
-    progressReportPropertiesForAnalytics = bookInteraction.getProgressReportPropertiesForAnalytics();
+    progressReportPropertiesForAnalytics =
+        bookInteraction.getProgressReportPropertiesForAnalytics();
     expect(progressReportPropertiesForAnalytics.audioDuration).toEqual(30);
     expect(progressReportPropertiesForAnalytics.videoDuration).toEqual(100);
 });
diff --git a/src/bookInteraction.ts b/src/bookInteraction.ts
index 9660e20c..1a172e12 100644
--- a/src/bookInteraction.ts
+++ b/src/bookInteraction.ts
@@ -22,7 +22,7 @@ export class BookInteraction {
             audioDuration: this.totalAudioDuration,
             videoDuration: this.totalVideoDuration,
             lastNumberedPageRead: this.lastNumberedPageWasRead,
-            readDuration: Math.floor((Date.now() - this.beginReadTime) / 1000) // seconds spent reading this book
+            readDuration: Math.floor((Date.now() - this.beginReadTime) / 1000), // seconds spent reading this book
         };
     }
 
diff --git a/src/controlBar.tsx b/src/controlBar.tsx
index bf3ff93f..bcc11a19 100644
--- a/src/controlBar.tsx
+++ b/src/controlBar.tsx
@@ -79,7 +79,9 @@ export interface IVideoSettings {
     imageDescriptions?: boolean;
 }
 
-export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
+export const ControlBar: React.FunctionComponent<IControlBarProps> = (
+    props,
+) => {
     const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
 
     // The "single" class triggers the change in color of the globe icon
@@ -135,7 +137,7 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
         const settings: IVideoSettings = {
             lang: props.activeLanguageCode,
             imageDescriptions: props.readImageDescriptions,
-            ...newSettings
+            ...newSettings,
         };
         // To achieve our goal that Bloom Editor can send this string back to another instance
         // of BP through the videoSettings URL param without needing to interpret its contents,
@@ -144,14 +146,14 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
         // it as JSON; but then Bloom Editor would have to know how to re-encode it as a URL param.
         sendStringToBloomApi(
             "publish/av/videoSettings",
-            encodeURIComponent(JSON.stringify(settings))
+            encodeURIComponent(JSON.stringify(settings)),
         );
     };
 
     const pauseLabel = LocalizationManager.getTranslation(
         "Audio.Pause",
         props.preferredLanguages,
-        "Pause"
+        "Pause",
     );
 
     const playOrPause = props.paused ? (
@@ -163,13 +165,13 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
     const readImageDescriptions = LocalizationManager.getTranslation(
         "Button.ReadImageDescriptions",
         props.preferredLanguages,
-        "Read Image Descriptions"
+        "Read Image Descriptions",
     );
 
     const ignoreImageDescriptions = LocalizationManager.getTranslation(
         "Button.IgnoreImageDescriptions",
         props.preferredLanguages,
-        "Ignore Image Descriptions"
+        "Ignore Image Descriptions",
     );
 
     // A modified Mui theme just for the image description icon.
@@ -179,8 +181,8 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
     const imageDescIconTheme = createTheme({
         palette: {
             primary: { main: bloomYellow },
-            secondary: { main: theme.palette.secondary.main }
-        }
+            secondary: { main: theme.palette.secondary.main },
+        },
     });
 
     // Using a Mui SvgIcon object here (the "ImageDescriptionIcon") simplifies opacity, accessibility
@@ -209,7 +211,7 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
     );
 
     const extraButtons = props.extraButtons
-        ? props.extraButtons.map(eb => (
+        ? props.extraButtons.map((eb) => (
               <IconButton
                   key={eb.id}
                   color="secondary"
@@ -233,44 +235,46 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
             position="relative" // Keeps the AppBar from floating
         >
             <Toolbar>
-                {// The logic here is:
-                // - Bloom reader: window === window.top, canGoBack true => Arrow
-                // - Bloom Library, came from detail view: don't need a button at all,
-                // (use browser back button), canGoBack will be passed false.
-                // - Bloom library, not from detail view: canGoBack is true, but not really going back;
-                // it will go to detail view ("more") which in this case is not 'back'.
-                // We may eventually want separate canShowMore and moreClicked props
-                // but for now it feels like more complication than we need.
-                props.canGoBack && !props.videoPreviewMode && (
-                    <IconButton
-                        color="secondary"
-                        onClick={() => {
-                            if (props.backClicked) {
-                                props.backClicked();
-                            }
-                        }}
-                    >
-                        {window === window.top ? (
-                            <ArrowBack
-                                aria-label="Go Back"
-                                titleAccess={LocalizationManager.getTranslation(
-                                    "Button.Back",
-                                    props.preferredLanguages,
-                                    "Back"
-                                )}
-                            />
-                        ) : (
-                            <MoreHoriz
-                                aria-label="More Menu"
-                                titleAccess={LocalizationManager.getTranslation(
-                                    "Button.More",
-                                    props.preferredLanguages,
-                                    "More"
-                                )}
-                            />
-                        )}
-                    </IconButton>
-                )}
+                {
+                    // The logic here is:
+                    // - Bloom reader: window === window.top, canGoBack true => Arrow
+                    // - Bloom Library, came from detail view: don't need a button at all,
+                    // (use browser back button), canGoBack will be passed false.
+                    // - Bloom library, not from detail view: canGoBack is true, but not really going back;
+                    // it will go to detail view ("more") which in this case is not 'back'.
+                    // We may eventually want separate canShowMore and moreClicked props
+                    // but for now it feels like more complication than we need.
+                    props.canGoBack && !props.videoPreviewMode && (
+                        <IconButton
+                            color="secondary"
+                            onClick={() => {
+                                if (props.backClicked) {
+                                    props.backClicked();
+                                }
+                            }}
+                        >
+                            {window === window.top ? (
+                                <ArrowBack
+                                    aria-label="Go Back"
+                                    titleAccess={LocalizationManager.getTranslation(
+                                        "Button.Back",
+                                        props.preferredLanguages,
+                                        "Back",
+                                    )}
+                                />
+                            ) : (
+                                <MoreHoriz
+                                    aria-label="More Menu"
+                                    titleAccess={LocalizationManager.getTranslation(
+                                        "Button.More",
+                                        props.preferredLanguages,
+                                        "More",
+                                    )}
+                                />
+                            )}
+                        </IconButton>
+                    )
+                }
                 <div
                     className="filler" // this is set to flex-grow, making the following icons right-aligned.
                 />
@@ -279,7 +283,7 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
                         onClick={() => {
                             props.onReadImageDescriptionToggled();
                             reportVideoSettings({
-                                imageDescriptions: !props.readImageDescriptions
+                                imageDescriptions: !props.readImageDescriptions,
                             });
                         }}
                     >
@@ -299,7 +303,7 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
                             titleAccess={LocalizationManager.getTranslation(
                                 "Button.ChooseLanguage",
                                 props.preferredLanguages,
-                                "Choose Language"
+                                "Choose Language",
                             )}
                         />
                     </IconButton>
@@ -337,7 +341,7 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
                                     titleAccess={LocalizationManager.getTranslation(
                                         "Button.FullScreen",
                                         props.preferredLanguages,
-                                        "Full Screen"
+                                        "Full Screen",
                                     )}
                                 />
                             ) : (
@@ -346,7 +350,7 @@ export const ControlBar: React.FunctionComponent<IControlBarProps> = props => {
                                     titleAccess={LocalizationManager.getTranslation(
                                         "Button.ExitFullScreen",
                                         props.preferredLanguages,
-                                        "Exit Full Screen"
+                                        "Exit Full Screen",
                                     )}
                                 />
                             )}
diff --git a/src/dragActivityRuntime.ts b/src/dragActivityRuntime.ts
index 01bfa63b..6ca4b165 100644
--- a/src/dragActivityRuntime.ts
+++ b/src/dragActivityRuntime.ts
@@ -15,7 +15,7 @@ import {
     kAudioSentence,
     playAllAudio,
     playAllVideo,
-    urlPrefix
+    urlPrefix,
 } from "./narration";
 
 let targetPositions: {
@@ -39,14 +39,14 @@ const savePositions = (page: HTMLElement) => {
         positionsToRestore.push({
             x: elt.style.left,
             y: elt.style.top,
-            elt
+            elt,
         });
     });
 };
 // Restore the positions saved by savePositions (when leaving the Play tab, or leaving this page altogether
 // after being in that tab).
 const restorePositions = () => {
-    positionsToRestore.forEach(p => {
+    positionsToRestore.forEach((p) => {
         p.elt.style.left = p.x;
         p.elt.style.top = p.y;
     });
@@ -61,30 +61,30 @@ export function prepareActivity(
     page: HTMLElement,
     // Possibly obsolete: an action to take when the user clicks a change page button.
     // Current plan is to just let BP add its own change page buttons.
-    changePageAction: (next: boolean) => void
+    changePageAction: (next: boolean) => void,
 ) {
     currentPage = page;
     currentChangePageAction = changePageAction;
     doShowAnswersInTargets(
         page.getAttribute("data-show-answers-in-targets") === "true",
-        page
+        page,
     );
     // not sure we need this in BP, but definitely for when Bloom desktop goes to another tab.
     savePositions(page);
 
     // Set up event listeners for any change page buttons.
     const changePageButtons = Array.from(
-        page.getElementsByClassName("bloom-change-page-button")
+        page.getElementsByClassName("bloom-change-page-button"),
     );
-    changePageButtons.forEach(b =>
-        b.addEventListener("click", changePageButtonClicked)
+    changePageButtons.forEach((b) =>
+        b.addEventListener("click", changePageButtonClicked),
     );
 
     // Hide image titles, which might give too much away, or distract.
     Array.from(document.getElementsByClassName("bloom-imageContainer")).forEach(
-        container => {
+        (container) => {
             (container as HTMLElement).title = "";
-        }
+        },
     );
 
     // By default, a shadow of any image can be dragged (e.g., to a paint program).
@@ -102,7 +102,7 @@ export function prepareActivity(
     draggables.forEach((elt: HTMLElement) => {
         const targetId = elt.getAttribute("data-bubble-id");
         const target = page.querySelector(
-            `[data-target-of="${targetId}"]`
+            `[data-target-of="${targetId}"]`,
         ) as HTMLElement;
         if (target) {
             const x = target.offsetLeft;
@@ -111,7 +111,7 @@ export function prepareActivity(
                 x,
                 y,
                 width: target.offsetWidth,
-                height: target.offsetHeight
+                height: target.offsetHeight,
             });
             targets.push(target);
         }
@@ -122,7 +122,7 @@ export function prepareActivity(
     });
 
     const videos = Array.from(page.getElementsByTagName("video"));
-    videos.forEach(video => {
+    videos.forEach((video) => {
         video.addEventListener("pointerdown", playVideo);
         if (
             video
@@ -138,8 +138,8 @@ export function prepareActivity(
     // Add event listeners to (other) text items that should play audio when clicked.
     const dontPlayWhenClicked = draggables.concat(targets);
     const otherTextItems = Array.from(
-        page.getElementsByClassName("bloom-visibility-code-on")
-    ).filter(e => {
+        page.getElementsByClassName("bloom-visibility-code-on"),
+    ).filter((e) => {
         var top = e.closest(".bloom-textOverPicture") as HTMLElement;
         if (!top) {
             // don't think this can happen with current game templates,
@@ -151,19 +151,19 @@ export function prepareActivity(
         // targets don't need to play.
         return dontPlayWhenClicked.indexOf(top) < 0;
     });
-    otherTextItems.forEach(e => {
+    otherTextItems.forEach((e) => {
         e.addEventListener("pointerdown", playAudioOfTarget);
     });
 
     // Add event listeners to check, try again, and show correct buttons.
     const checkButtons = Array.from(
-        page.getElementsByClassName("check-button")
+        page.getElementsByClassName("check-button"),
     );
     const tryAgainButtons = Array.from(
-        page.getElementsByClassName("try-again-button")
+        page.getElementsByClassName("try-again-button"),
     );
     const showCorrectButtons = Array.from(
-        page.getElementsByClassName("show-correct-button")
+        page.getElementsByClassName("show-correct-button"),
     );
 
     checkButtons.forEach((elt: HTMLElement) => {
@@ -202,7 +202,7 @@ const prepareOrderSentenceActivity = (page: HTMLElement) => {
     Array.from(page.getElementsByClassName("drag-item-order-sentence")).forEach(
         (elt: HTMLElement) => {
             const contentElt = elt.getElementsByClassName(
-                "bloom-content1"
+                "bloom-content1",
             )[0] as HTMLElement;
             const content = contentElt?.textContent?.trim();
             if (!content) return;
@@ -220,7 +220,7 @@ const prepareOrderSentenceActivity = (page: HTMLElement) => {
             // Maybe now we tweaked word padding to make the original sentence take up more
             // space, we could use its own width?
             elt.parentElement?.insertBefore(container, elt);
-        }
+        },
     );
 };
 
@@ -235,16 +235,16 @@ const playVideo = (e: MouseEvent) => {
 export function undoPrepareActivity(page: HTMLElement) {
     restorePositions();
     const changePageButtons = Array.from(
-        page.getElementsByClassName("bloom-change-page-button")
+        page.getElementsByClassName("bloom-change-page-button"),
     );
-    changePageButtons.forEach(b =>
-        b.removeEventListener("click", changePageButtonClicked)
+    changePageButtons.forEach((b) =>
+        b.removeEventListener("click", changePageButtonClicked),
     );
 
     Array.from(page.getElementsByClassName("bloom-visibility-code-on")).forEach(
-        e => {
+        (e) => {
             e.removeEventListener("pointerdown", playAudioOfTarget);
-        }
+        },
     );
 
     page.querySelectorAll("[data-bubble-id]").forEach((elt: HTMLElement) => {
@@ -256,18 +256,18 @@ export function undoPrepareActivity(page: HTMLElement) {
     });
 
     const videos = Array.from(page.getElementsByTagName("video"));
-    videos.forEach(video => {
+    videos.forEach((video) => {
         video.removeEventListener("pointerdown", playVideo);
         video.classList.remove("bloom-ui-no-controls");
     });
     const checkButtons = Array.from(
-        page.getElementsByClassName("check-button")
+        page.getElementsByClassName("check-button"),
     );
     const tryAgainButtons = Array.from(
-        page.getElementsByClassName("try-again-button")
+        page.getElementsByClassName("try-again-button"),
     );
     const showCorrectButtons = Array.from(
-        page.getElementsByClassName("show-correct-button")
+        page.getElementsByClassName("show-correct-button"),
     );
 
     checkButtons.forEach((elt: HTMLElement) => {
@@ -289,7 +289,7 @@ export function undoPrepareActivity(page: HTMLElement) {
     });
 
     Array.from(
-        page.getElementsByClassName("drag-item-random-sentence")
+        page.getElementsByClassName("drag-item-random-sentence"),
     ).forEach((elt: HTMLElement) => {
         elt.parentElement?.removeChild(elt);
     });
@@ -333,12 +333,12 @@ function makeWordItems(
     contentElt: HTMLElement,
     // Should the reader be able to drag the words? Not when we're using this
     // to show the correct answer.
-    makeDraggable: boolean
+    makeDraggable: boolean,
 ) {
     const userStyle =
-        Array.from(contentElt?.classList)?.find(c => c.endsWith("-style")) ??
+        Array.from(contentElt?.classList)?.find((c) => c.endsWith("-style")) ??
         "Normal-style";
-    words.forEach(word => {
+    words.forEach((word) => {
         const wordItem = page.ownerDocument.createElement("div");
         wordItem.classList.add("drag-item-order-word");
         wordItem.textContent = word;
@@ -352,13 +352,13 @@ function makeWordItems(
 
 function changePageButtonClicked(e: MouseEvent) {
     const next = (e.currentTarget as HTMLElement).classList.contains(
-        "bloom-next-page"
+        "bloom-next-page",
     );
     currentChangePageAction?.(next);
 }
 
 export function playInitialElements(page: HTMLElement) {
-    const initialFilter = e => {
+    const initialFilter = (e) => {
         const top = e.closest(".bloom-textOverPicture") as HTMLElement;
         if (!top) {
             // not an overlay at all. (Note that all overlays have this class, including
@@ -387,7 +387,7 @@ export function playInitialElements(page: HTMLElement) {
         return true;
     };
     const videoElements = Array.from(page.getElementsByTagName("video")).filter(
-        initialFilter
+        initialFilter,
     );
     const audioElements = getVisibleEditables(page).filter(initialFilter);
 
@@ -407,14 +407,14 @@ export function playInitialElements(page: HTMLElement) {
 function getAudioSentences(editables: HTMLElement[]) {
     // Could be done more cleanly with flatMap or flat() but not ready to switch to es2019 yet.
     const result: HTMLElement[] = [];
-    editables.forEach(e => {
+    editables.forEach((e) => {
         if (e.classList.contains(kAudioSentence)) {
             result.push(e);
         }
         result.push(
             ...(Array.from(
-                e.getElementsByClassName(kAudioSentence)
-            ) as HTMLElement[])
+                e.getElementsByClassName(kAudioSentence),
+            ) as HTMLElement[]),
         );
     });
     return result;
@@ -424,9 +424,9 @@ function getVisibleEditables(container: HTMLElement) {
     // We want to play any audio we have from divs the user can see.
     // This is a crude test, but currently we always use display:none to hide unwanted languages.
     const result = Array.from(
-        container.getElementsByClassName("bloom-editable")
+        container.getElementsByClassName("bloom-editable"),
     ).filter(
-        e => window.getComputedStyle(e).display !== "none"
+        (e) => window.getComputedStyle(e).display !== "none",
     ) as HTMLElement[];
     if (
         container.classList.contains("bloom-editable") &&
@@ -447,7 +447,7 @@ function shuffle<T>(array: T[]): T[] {
         currentIndex--;
         [array[currentIndex], array[randomIndex]] = [
             array[randomIndex],
-            array[currentIndex]
+            array[currentIndex],
         ];
     }
     return array;
@@ -463,7 +463,7 @@ const showCorrect = (e: MouseEvent) => {
         .forEach((elt: HTMLElement) => {
             const targetId = elt.getAttribute("data-bubble-id");
             const target = currentPage?.querySelector(
-                `[data-target-of="${targetId}"]`
+                `[data-target-of="${targetId}"]`,
             ) as HTMLElement;
             if (!target) {
                 return; // this one is not required to be in a right place
@@ -476,7 +476,7 @@ const showCorrect = (e: MouseEvent) => {
             elt.style.top = y + "px";
         });
     Array.from(
-        currentPage.getElementsByClassName("drag-item-random-sentence")
+        currentPage.getElementsByClassName("drag-item-random-sentence"),
     ).forEach((container: HTMLElement) => {
         const correctAnswer =
             container.getAttribute("data-answer")?.split(" ") ?? [];
@@ -487,7 +487,7 @@ const showCorrect = (e: MouseEvent) => {
             correctAnswer,
             container,
             userStyleSource,
-            false
+            false,
         );
     });
     classSetter(currentPage!, "drag-activity-wrong", false);
@@ -631,7 +631,7 @@ export const performTryAgain = (e: MouseEvent) => {
 export const classSetter = (
     page: HTMLElement,
     className: string,
-    wanted: boolean
+    wanted: boolean,
 ) => {
     if (wanted) {
         page.parentElement?.classList.add(className);
@@ -648,17 +648,17 @@ function showCorrectOrWrongItems(page: HTMLElement, correct: boolean) {
 
     // play sound
     const soundFile = page.getAttribute(
-        correct ? "data-correct-sound" : "data-wrong-sound"
+        correct ? "data-correct-sound" : "data-wrong-sound",
     );
     const playOtherStuff = () => {
         const elementsMadeVisible = Array.from(
             page.getElementsByClassName(
-                correct ? "drag-item-correct" : "drag-item-wrong"
-            )
+                correct ? "drag-item-correct" : "drag-item-wrong",
+            ),
         ) as HTMLElement[];
         const possibleNarrationElements: HTMLElement[] = [];
         const videoElements: HTMLVideoElement[] = [];
-        elementsMadeVisible.forEach(e => {
+        elementsMadeVisible.forEach((e) => {
             possibleNarrationElements.push(...getVisibleEditables(e));
             videoElements.push(...Array.from(e.getElementsByTagName("video")));
         });
@@ -688,7 +688,7 @@ function playSound(someElt: HTMLElement, soundFile: string) {
         () => {
             someElt.removeChild(audio);
         },
-        { once: true }
+        { once: true },
     );
 }
 
@@ -698,7 +698,7 @@ function checkDraggables(page: HTMLElement) {
     draggables.forEach((draggableToCheck: HTMLElement) => {
         const targetId = draggableToCheck.getAttribute("data-bubble-id");
         const target = page.querySelector(
-            `[data-target-of="${targetId}"]`
+            `[data-target-of="${targetId}"]`,
         ) as HTMLElement;
         if (!target) {
             // this one is not required to be in a right place.
@@ -714,8 +714,8 @@ function checkDraggables(page: HTMLElement) {
             // (don't use getElementsByClassName here...there could be a TG on an image description of
             // a picture. To be a text item it must have a direct child that is a TG.)
             if (
-                !Array.from(draggableToCheck.children).some(x =>
-                    x.classList.contains("bloom-translationGroup")
+                !Array.from(draggableToCheck.children).some((x) =>
+                    x.classList.contains("bloom-translationGroup"),
                 )
             ) {
                 // not a text item. Two images or videos with the same (empty) text are not equivalent.
@@ -758,11 +758,10 @@ function startDragWordInSentence(e: PointerEvent) {
     dragStartY = e.clientY / scale - wordBeingRepositioned.offsetTop;
 
     // Leave the original where it was and make a copy to drag around.
-    draggableReposition = wordBeingRepositioned.ownerDocument.createElement(
-        "div"
-    );
-    wordBeingRepositioned.classList.forEach(c =>
-        draggableReposition.classList.add(c)
+    draggableReposition =
+        wordBeingRepositioned.ownerDocument.createElement("div");
+    wordBeingRepositioned.classList.forEach((c) =>
+        draggableReposition.classList.add(c),
     );
     //draggableReposition.classList.add("drag-item-order-word");
     draggableReposition.textContent = wordBeingRepositioned.textContent;
@@ -778,7 +777,7 @@ function startDragWordInSentence(e: PointerEvent) {
     placeHolder.style.width = startWidth + draggableWordMargin + "px";
     wordBeingRepositioned.parentElement?.insertBefore(
         placeHolder,
-        wordBeingRepositioned
+        wordBeingRepositioned,
     );
     wordBeingRepositioned.style.display = "none";
 
@@ -817,7 +816,7 @@ const dragWordInSentence = (e: PointerEvent) => {
         return;
     }
     const container = wordBeingRepositioned.parentElement!;
-    const itemDraggedOver = Array.from(container.children).find(c => {
+    const itemDraggedOver = Array.from(container.children).find((c) => {
         const rect = c.getBoundingClientRect();
         return (
             c !== wordBeingRepositioned &&
@@ -843,7 +842,7 @@ const dragWordInSentence = (e: PointerEvent) => {
             animateMove(() => {
                 container.insertBefore(
                     placeHolder!,
-                    itemDraggedOver.nextSibling
+                    itemDraggedOver.nextSibling,
                 );
             });
         } else {
@@ -857,13 +856,13 @@ const dragWordInSentence = (e: PointerEvent) => {
         // move to the end. Enhance: should we move to the front if we're above or to the left?
         const relatedItems = Array.from(
             wordBeingRepositioned.parentElement!.getElementsByClassName(
-                "drag-item-order-word"
-            )
+                "drag-item-order-word",
+            ),
         ).filter(
-            x =>
+            (x) =>
                 x !== wordBeingRepositioned &&
                 x !== placeHolder &&
-                x !== draggableReposition
+                x !== draggableReposition,
         ) as HTMLElement[];
         const lastItem = relatedItems[relatedItems.length - 1];
         const bounds = lastItem.getBoundingClientRect();
@@ -884,16 +883,16 @@ const stopDragWordInSentence = (e: PointerEvent) => {
     wordBeingRepositioned.style.visibility = "visible";
     wordBeingRepositioned.removeEventListener(
         "pointerup",
-        stopDragWordInSentence
+        stopDragWordInSentence,
     );
     wordBeingRepositioned.removeEventListener(
         "pointermove",
-        dragWordInSentence
+        dragWordInSentence,
     );
     wordBeingRepositioned.releasePointerCapture(e.pointerId); // redundant I think
     wordBeingRepositioned.removeEventListener(
         "touchstart",
-        preventTouchDefault
+        preventTouchDefault,
     );
     // We're getting rid of this, so we don't need to remove the event handlers it has.
     draggableReposition.parentElement?.removeChild(draggableReposition);
@@ -901,7 +900,7 @@ const stopDragWordInSentence = (e: PointerEvent) => {
     wordBeingRepositioned.parentElement?.insertBefore(
         wordBeingRepositioned,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        placeHolder!
+        placeHolder!,
     );
     wordBeingRepositioned.parentElement?.removeChild(placeHolder!);
     placeHolder = undefined;
@@ -980,11 +979,11 @@ function checkRandomSentences(page: HTMLElement) {
 export const doShowAnswersInTargets = (showNow: boolean, page: HTMLElement) => {
     const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
     if (showNow) {
-        draggables.forEach(draggable => {
+        draggables.forEach((draggable) => {
             copyContentToTarget(draggable as HTMLElement);
         });
     } else {
-        draggables.forEach(draggable => {
+        draggables.forEach((draggable) => {
             removeContentFromTarget(draggable as HTMLElement);
         });
     }
@@ -1004,36 +1003,36 @@ export function copyContentToTarget(draggable: HTMLElement) {
     throwAway.innerHTML = draggable.innerHTML;
 
     // Don't need the bubble controls
-    Array.from(throwAway.getElementsByClassName("bloom-ui")).forEach(e => {
+    Array.from(throwAway.getElementsByClassName("bloom-ui")).forEach((e) => {
         e.remove();
     });
     // Nor the image editing controls.
     Array.from(throwAway.getElementsByClassName("imageOverlayButton")).forEach(
-        e => {
+        (e) => {
             e.remove();
-        }
+        },
     );
-    Array.from(throwAway.getElementsByClassName("imageButton")).forEach(e => {
+    Array.from(throwAway.getElementsByClassName("imageButton")).forEach((e) => {
         e.remove();
     });
     // Bloom has integrity checks for duplicate ids, and we don't need them in the duplicate content.
-    Array.from(throwAway.querySelectorAll("[id]")).forEach(e => {
+    Array.from(throwAway.querySelectorAll("[id]")).forEach((e) => {
         e.removeAttribute("id");
     });
-    Array.from(throwAway.getElementsByClassName("hoverUp")).forEach(e => {
+    Array.from(throwAway.getElementsByClassName("hoverUp")).forEach((e) => {
         // Produces at least a change in background color that we don't want.
         e.classList.remove("hoverUp");
     });
     // Content is not editable inside the target.
-    Array.from(throwAway.querySelectorAll("[contenteditable]")).forEach(e => {
+    Array.from(throwAway.querySelectorAll("[contenteditable]")).forEach((e) => {
         e.removeAttribute("contenteditable");
     });
     // Nor should we able to tab to it, or focus it.
-    Array.from(throwAway.querySelectorAll("[tabindex]")).forEach(e => {
+    Array.from(throwAway.querySelectorAll("[tabindex]")).forEach((e) => {
         e.removeAttribute("tabindex");
     });
     const imageContainer = throwAway.getElementsByClassName(
-        "bloom-imageContainer"
+        "bloom-imageContainer",
     )[0] as HTMLElement;
     if (imageContainer) {
         // We need another layer to manage clipping and centering. The one we were going to
@@ -1058,7 +1057,7 @@ export const getTarget = (draggable: HTMLElement): HTMLElement | undefined => {
         return undefined;
     }
     return draggable.ownerDocument.querySelector(
-        `[data-target-of="${targetId}"]`
+        `[data-target-of="${targetId}"]`,
     ) as HTMLElement;
 };
 
diff --git a/src/event.ts b/src/event.ts
index e428bfa1..80b1a737 100644
--- a/src/event.ts
+++ b/src/event.ts
@@ -17,10 +17,10 @@ export default class LiteEvent<T> implements ILiteEvent<T> {
     }
 
     public unsubscribe(handler: (data?: T) => void) {
-        this.handlers = this.handlers.filter(h => h !== handler);
+        this.handlers = this.handlers.filter((h) => h !== handler);
     }
 
     public raise(data?: T) {
-        this.handlers.slice(0).forEach(h => h(data));
+        this.handlers.slice(0).forEach((h) => h(data));
     }
 }
diff --git a/src/externalContext.ts b/src/externalContext.ts
index a88374b8..51eed2d0 100644
--- a/src/externalContext.ts
+++ b/src/externalContext.ts
@@ -1,12 +1,12 @@
 import { TransientPageDataSingleton } from "./transientPageData";
 import {
     getBooleanUrlParam,
-    getQueryStringParamAndUnencode
+    getQueryStringParamAndUnencode,
 } from "./utilities/urlUtils";
 
 import {
     track,
-    /*useTrack,*/ updateBookProgress
+    /*useTrack,*/ updateBookProgress,
 } from "./bloomPlayerAnalytics";
 
 /* Functions
@@ -64,7 +64,7 @@ export function reportAnalytics(event: string, properties: any) {
         sendMessageToHost({
             messageType: "sendAnalytics",
             event,
-            params: { ...ambientAnalyticsProps, ...properties }
+            params: { ...ambientAnalyticsProps, ...properties },
         });
     }
 }
@@ -72,14 +72,14 @@ export function reportAnalytics(event: string, properties: any) {
 export function reportBookProperties(properties: any) {
     sendMessageToHost({
         messageType: "reportBookProperties",
-        params: { ...properties }
+        params: { ...properties },
     });
 }
 
 export function reportPlaybackComplete(properties: any) {
     sendMessageToHost({
         messageType: "playbackComplete",
-        params: { ...properties }
+        params: { ...properties },
     });
 }
 
@@ -106,7 +106,7 @@ export function updateBookProgressReport(event: string, properties: any) {
         sendMessageToHost({
             messageType: "updateBookProgressReport",
             event,
-            params: { ...ambientAnalyticsProps, ...properties }
+            params: { ...ambientAnalyticsProps, ...properties },
         });
     }
 }
@@ -166,7 +166,7 @@ export function requestCapabilities(callback: (data: any) => void) {
     // something starts to queue up window messages some time before it starts to
     // process them. But it's definitely not enough to just request once immediately.
     let retryLimit = 20;
-    const receiveCapabilities = data => {
+    const receiveCapabilities = (data) => {
         if (!gotCapabilities) {
             gotCapabilities = true;
         }
@@ -200,7 +200,7 @@ export function receiveMessage(data: any) {
             "receiveMessage failed to parse json: " +
                 data +
                 " with error " +
-                e.message
+                e.message,
         );
         return;
     }
@@ -228,7 +228,7 @@ export function receiveMessage(data: any) {
 // window.addEventListener. However, for some time the code had document.addEventListener, and this
 // apparently worked in BloomReader-RN. It's just possible we will need to do both when we resume
 // work on that program.
-window.addEventListener("message", data => {
+window.addEventListener("message", (data) => {
     // something sends us an empty message, which we haven't figured out, but know we can ignore
     if (!data || !data.data || data.data.length === 0) {
         //console.log("returning early");
diff --git a/src/l10n/localizationManager.test.ts b/src/l10n/localizationManager.test.ts
index fe501548..e17e61dd 100644
--- a/src/l10n/localizationManager.test.ts
+++ b/src/l10n/localizationManager.test.ts
@@ -7,28 +7,28 @@ beforeAll(() => {
         en: {
             "Sample.ID": {
                 message: "Sample English Text",
-                description: "This is a test."
-            }
+                description: "This is a test.",
+            },
         },
         fr: {
             "Sample.ID": {
                 message: "Sample French Text",
-                description: "This is a test."
-            }
+                description: "This is a test.",
+            },
         },
         hi: {
             "Sample.ID": {
                 message: "Sample Hindi Text",
-                description: "This is a test."
-            }
+                description: "This is a test.",
+            },
         },
         sp: {
             // We don't expect this to ever happen in real data
             "Sample.ID.WithoutEnglish": {
                 message: "Sample Spanish Text",
-                description: "This is a test."
-            }
-        }
+                description: "This is a test.",
+            },
+        },
     });
 });
 
diff --git a/src/l10n/localizationUtils.test.ts b/src/l10n/localizationUtils.test.ts
index 8425b3e3..7d37fe8a 100644
--- a/src/l10n/localizationUtils.test.ts
+++ b/src/l10n/localizationUtils.test.ts
@@ -47,10 +47,8 @@ BODY
     direction: ltr;
 }`;
 
-    const [
-        language2,
-        language3
-    ] = LocalizationUtils.getNationalLanguagesFromCssStyles(cssText);
+    const [language2, language3] =
+        LocalizationUtils.getNationalLanguagesFromCssStyles(cssText);
 
     expect(language2).toEqual("bbb");
     expect(language3).toEqual("ccc");
diff --git a/src/l10n/localizationUtils.ts b/src/l10n/localizationUtils.ts
index efaf9716..02c2d5a7 100644
--- a/src/l10n/localizationUtils.ts
+++ b/src/l10n/localizationUtils.ts
@@ -5,7 +5,7 @@ export class LocalizationUtils {
             return undefined;
         }
         const language1: string = (dataDiv.querySelector(
-            "div[data-book='contentLanguage1']"
+            "div[data-book='contentLanguage1']",
         ) as HTMLElement)!.innerHTML!.trim();
         if (language1) {
             return language1;
@@ -21,7 +21,7 @@ export class LocalizationUtils {
     // if the user changed settings and went straight to publish. I also wasn't convinced
     // bloom-contentNational2 would always exist.
     public static getNationalLanguagesFromCssStyles(
-        cssText: string
+        cssText: string,
     ): [string | undefined, string | undefined] {
         let language2: string | undefined;
         let language3: string | undefined;
diff --git a/src/langData.ts b/src/langData.ts
index 854f216b..6ae89762 100644
--- a/src/langData.ts
+++ b/src/langData.ts
@@ -39,41 +39,40 @@ export default class LangData {
 
     private static getLangDataByCode = (
         languageData: LangData[],
-        languageCode: string
+        languageCode: string,
     ): LangData => {
-        return languageData.filter(lang => lang.Code === languageCode)[0];
+        return languageData.filter((lang) => lang.Code === languageCode)[0];
     };
 
     private static getActiveCodeFromLangData = (
-        languageData: LangData[]
+        languageData: LangData[],
     ): string => {
         if (languageData.length < 1) {
             return "";
         }
-        return languageData.filter(lang => lang.IsSelected)[0]?.Code;
+        return languageData.filter((lang) => lang.IsSelected)[0]?.Code;
     };
 
     // Assumes caller has already verified that there is a change in code.
     public static selectNewLanguageCode = (
         languageData: LangData[],
-        newActiveLanguageCode: string
+        newActiveLanguageCode: string,
     ) => {
         const newActiveLangData = LangData.getLangDataByCode(
             languageData,
-            newActiveLanguageCode
+            newActiveLanguageCode,
         );
         if (newActiveLangData.IsSelected) {
             return; // nothing to do.
         }
         // Unselect the old one first (as a belt-and-braces guard
         // against it being the same one we are about to select)
-        const oldActiveLangCode = LangData.getActiveCodeFromLangData(
-            languageData
-        );
+        const oldActiveLangCode =
+            LangData.getActiveCodeFromLangData(languageData);
         if (oldActiveLangCode !== undefined) {
             const oldActiveLangData = LangData.getLangDataByCode(
                 languageData,
-                oldActiveLangCode
+                oldActiveLangCode,
             );
             oldActiveLangData.IsSelected = false;
         }
@@ -82,7 +81,7 @@ export default class LangData {
 
     public static createLangDataArrayFromDomAndMetadata(
         body: HTMLBodyElement,
-        metadataObject: object
+        metadataObject: object,
     ): LangData[] {
         let languageArray: LangData[] = [];
         const languageDisplayNames: object | undefined =
@@ -100,13 +99,13 @@ export default class LangData {
             body,
             null,
             XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
-            null
+            null,
         );
         for (let idx = 0; idx < langDivs.snapshotLength; idx++) {
             const langDiv = langDivs.snapshotItem(idx) as HTMLElement;
             if (
                 langDiv.parentElement!.classList.contains(
-                    "bloom-ignoreChildrenForBookLanguageList"
+                    "bloom-ignoreChildrenForBookLanguageList",
                 )
             ) {
                 continue;
@@ -132,9 +131,9 @@ export default class LangData {
                 const langData = new LangData(
                     LangData.getBestLanguageNameFromMetaData(
                         langCode,
-                        languageDisplayNames
+                        languageDisplayNames,
                     ),
-                    langCode
+                    langCode,
                 );
                 if (LangData.hasAudioInLanguage(body, langCode)) {
                     langData.HasAudio = true;
@@ -145,7 +144,7 @@ export default class LangData {
         // Reorder based on vernacular first, then alphabetically.
         languageArray = LangData.reorderMenuItems(
             LangData.getLanguage1CodeOrEnglish(body),
-            languageArray
+            languageArray,
         );
 
         // Apply fallback information if we need it, but it's now very unlikely we'll need this
@@ -163,7 +162,7 @@ export default class LangData {
     // the rest alphabetically according to display name in current locale.
     private static reorderMenuItems(
         language1Code: string,
-        languageArray: LangData[]
+        languageArray: LangData[],
     ) {
         languageArray = languageArray.sort(LangData.compare);
 
@@ -189,7 +188,7 @@ export default class LangData {
     private static moveToBeginning(languageArray: LangData[], code: string) {
         const langDataToReorder = LangData.getLangDataByCode(
             languageArray,
-            code
+            code,
         );
         const index = languageArray.indexOf(langDataToReorder);
         // move from old index to beginning of array
@@ -210,7 +209,7 @@ export default class LangData {
             dataDivElement,
             null,
             XPathResult.FIRST_ORDERED_NODE_TYPE,
-            null
+            null,
         ).singleNodeValue;
         const language1Code: string = LangData.getLanguage1CodeOrEnglish(body);
         let name =
@@ -239,7 +238,7 @@ export default class LangData {
             dataDivElement,
             null,
             XPathResult.FIRST_ORDERED_NODE_TYPE,
-            null
+            null,
         ).singleNodeValue;
         const code =
             contentLanguage1Div === null
@@ -250,7 +249,7 @@ export default class LangData {
 
     private static getBestLanguageNameFromMetaData(
         code: string,
-        languageDisplayNames: object | undefined
+        languageDisplayNames: object | undefined,
     ): string {
         let proposedDisplayName = "";
         if (languageDisplayNames && languageDisplayNames.hasOwnProperty(code)) {
@@ -261,7 +260,7 @@ export default class LangData {
 
     private static getBestLanguageName(
         code: string,
-        proposedName: string
+        proposedName: string,
     ): string {
         const autonymHandler = AutonymHandler.getAutonymHandler();
         const langDbEntry = autonymHandler.getAutonymDataFor(code);
@@ -300,7 +299,7 @@ export default class LangData {
     // this for versions before it.
     private static hasAudioInLanguage(
         body: HTMLBodyElement,
-        isoCode: string
+        isoCode: string,
     ): boolean {
         const audioClass = "audio-sentence";
         const divsInLang = body.ownerDocument!.evaluate(
@@ -308,7 +307,7 @@ export default class LangData {
             body,
             null,
             XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
-            null
+            null,
         );
         for (let idx = 0; idx < divsInLang.snapshotLength; idx++) {
             const mainDiv = divsInLang.snapshotItem(idx) as HTMLElement;
@@ -323,7 +322,7 @@ export default class LangData {
                 mainDiv,
                 null,
                 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
-                null
+                null,
             );
             // An audio sentence only counts as in this language if the CLOSEST
             // lang attribute matches. Sometimes mainDiv is something further out,
diff --git a/src/languageMenu.tsx b/src/languageMenu.tsx
index 0fa6055a..844a0881 100644
--- a/src/languageMenu.tsx
+++ b/src/languageMenu.tsx
@@ -7,7 +7,7 @@ import {
     FormControl,
     FormControlLabel,
     Radio,
-    RadioGroup
+    RadioGroup,
 } from "@material-ui/core";
 // tslint:disable-next-line: no-submodule-imports
 import VolumeUp from "@material-ui/icons/VolumeUp";
@@ -18,14 +18,16 @@ interface ILanguageMenuProps {
     onClose: (value: string) => void; // Handler that runs when the menu closes. ${value} is the ISO code of the language the user selected, or "" if no change was made.
 }
 
-export const LanguageMenu: React.FunctionComponent<ILanguageMenuProps> = props => {
+export const LanguageMenu: React.FunctionComponent<ILanguageMenuProps> = (
+    props,
+) => {
     // the || case makes it robust against the possibility that no language is selected,
     // though this ought not to be.
     const [selectedLanguage, setSelectedLanguage] = useState(
         (
-            props.languages.filter(lang => lang.IsSelected)[0] ||
+            props.languages.filter((lang) => lang.IsSelected)[0] ||
             props.languages[0]
-        ).Code
+        ).Code,
     );
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/music.ts b/src/music.ts
index 00b23d32..8447cd32 100644
--- a/src/music.ts
+++ b/src/music.ts
@@ -3,7 +3,7 @@ import { BloomPlayerCore } from "./bloom-player-core";
 import {
     logSound,
     logSoundPaused,
-    logSoundRepeat
+    logSoundRepeat,
 } from "./videoRecordingSupport";
 import { PlaybackMode, currentPlaybackMode } from "./narration";
 
@@ -91,7 +91,7 @@ export class Music {
                 selection = {
                     id: ++iSelection,
                     src: attrValue,
-                    volume: this.getMusicVolume(page)
+                    volume: this.getMusicVolume(page),
                 };
                 this.pageIdToSelectionMap.set(this.getPageId(page), selection);
             } else if (attrValue === null) {
@@ -99,7 +99,7 @@ export class Music {
                     // Music continues on this page
                     this.pageIdToSelectionMap.set(
                         this.getPageId(page),
-                        selection
+                        selection,
                     );
                 }
             } else {
@@ -115,7 +115,7 @@ export class Music {
 
     private getPlayer(): HTMLAudioElement {
         let player = document.querySelector(
-            "#music-player"
+            "#music-player",
         ) as HTMLAudioElement;
         if (!player) {
             player = document.createElement("audio") as HTMLAudioElement;
@@ -130,7 +130,7 @@ export class Music {
 
     private setMusicSourceAndVolume(): void {
         const selection = this.pageIdToSelectionMap.get(
-            this.getPageId(this.currentPage)
+            this.getPageId(this.currentPage),
         );
         if (selection === undefined) {
             this.selectionPlaying = undefined;
@@ -149,7 +149,7 @@ export class Music {
         // remember if no such file previously existed. So we add a bogus query string
         // based on the current time so that it asks the server for the file again.
         const url = this.currentMusicUrl(
-            music + "?nocache=" + new Date().getTime()
+            music + "?nocache=" + new Date().getTime(),
         );
         const player = this.getPlayer();
         player.setAttribute("src", music ? url : "");
@@ -159,7 +159,7 @@ export class Music {
         if (music) {
             this.musicLogIndex = logSound(
                 url,
-                volume.length ? Number(volume) : 1
+                volume.length ? Number(volume) : 1,
             );
         }
     }
diff --git a/src/narration.test.ts b/src/narration.test.ts
index 04bcdef6..843cb386 100644
--- a/src/narration.test.ts
+++ b/src/narration.test.ts
@@ -6,53 +6,53 @@ test("sortAudioElements with no tabindexes preserves order", () => {
     const tg1 = createDiv({
         id: "tg1",
         classAttr: "bloom-translationGroup",
-        parent: input
+        parent: input,
     });
     const be1A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The first block</p>",
         tabindex: "3", // should be ignored
-        parent: tg1
+        parent: tg1,
     });
 
     const tg2 = createDiv({
         id: "tg2",
         classAttr: "bloom-translationGroup",
-        parent: input
+        parent: input,
     });
     const be2A = createDiv({
         id: "be2A",
         classAttr: "bloom-editable",
         tabindex: "1", // should be ignored
-        parent: tg2
+        parent: tg2,
     });
     const p2A1 = createPara({ id: "p2A1", classAttr: "", parent: be2A });
     const s2A1A = createSpan({
         id: "s2A1A",
         classAttr: "audio-sentence",
         content: "The first sentence in the second group",
-        parent: p2A1
+        parent: p2A1,
     });
     const s2A1B = createSpan({
         id: "s2A1B",
         classAttr: "audio-sentence",
         content: "The second sentence in the second group",
-        parent: p2A1
+        parent: p2A1,
     });
 
     const tg3 = createDiv({
         id: "tg1",
         classAttr: "bloom-translationGroup",
         content: "",
-        parent: input
+        parent: input,
     });
     const be3A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The third block</p>",
         tabindex: "0", // should be ignored
-        parent: tg3
+        parent: tg3,
     });
 
     const toSort = [be1A, s2A1A, s2A1B, be3A];
@@ -68,54 +68,54 @@ test("sortAudioElements with some tabindexes put missing ones last", () => {
     const tg1 = createDiv({
         id: "tg1",
         classAttr: "bloom-translationGroup", // no tabindex, should be last
-        parent: input
+        parent: input,
     });
     const be1A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The first block</p>",
         tabindex: "3", // should be ignored
-        parent: tg1
+        parent: tg1,
     });
 
     const tg2 = createDiv({
         id: "tg2",
         classAttr: "bloom-translationGroup",
         tabindex: "2",
-        parent: input
+        parent: input,
     });
     const be2A = createDiv({
         id: "be2A",
         classAttr: "bloom-editable",
         tabindex: "1", // should be ignored
-        parent: tg2
+        parent: tg2,
     });
     const p2A1 = createPara({ id: "p2A1", classAttr: "", parent: be2A });
     const s2A1A = createSpan({
         id: "s2A1A",
         classAttr: "audio-sentence",
         content: "The first sentence in the second group",
-        parent: p2A1
+        parent: p2A1,
     });
     const s2A1B = createSpan({
         id: "s2A1B",
         classAttr: "audio-sentence",
         content: "The second sentence in the second group",
-        parent: p2A1
+        parent: p2A1,
     });
 
     const tg3 = createDiv({
         id: "tg1",
         classAttr: "bloom-translationGroup",
         content: "",
-        parent: input
+        parent: input,
     });
     const be3A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The third block</p>",
         tabindex: "0", // should be ignored
-        parent: tg3
+        parent: tg3,
     });
 
     const toSort = [be1A, s2A1A, s2A1B, be3A];
@@ -132,70 +132,70 @@ test("sortAudioElements re-orders sentences and blocks", () => {
         id: "tg1",
         classAttr: "bloom-translationGroup",
         tabindex: "101",
-        parent: input
+        parent: input,
     });
     const be1A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The first block (read fifth)</p>",
         tabindex: "100", // should be ignored
-        parent: tg1
+        parent: tg1,
     });
 
     const tg2 = createDiv({
         id: "tg2",
         classAttr: "bloom-translationGroup",
         tabindex: "100",
-        parent: input
+        parent: input,
     });
     const be2A = createDiv({
         id: "be2A",
         classAttr: "bloom-editable audio-sentence",
         tabindex: "23", // should be ignored
-        parent: tg2
+        parent: tg2,
     });
     const p2A1 = createPara({ id: "p2A1", classAttr: "", parent: be2A });
     const s2A1A = createSpan({
         id: "s2A1A",
         classAttr: "audio-sentence",
         content: "The first sentence in the second group (read ",
-        parent: p2A1
+        parent: p2A1,
     });
     const s2A1B = createSpan({
         id: "s2A1B",
         classAttr: "audio-sentence",
         content: "The second sentence in the second group",
-        parent: p2A1
+        parent: p2A1,
     });
 
     const tg3 = createDiv({
         id: "tg1",
         classAttr: "bloom-translationGroup",
         tabindex: "11",
-        parent: input
+        parent: input,
     });
     const be3A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         tabindex: "0", // should be ignored
-        parent: tg3
+        parent: tg3,
     });
     const p3A1 = createPara({
         id: "p3A1",
         classAttr: "",
-        parent: be3A
+        parent: be3A,
     });
     const s3A1A = createSpan({
         id: "s3A1A",
         classAttr: "audio-sentence",
         content: "The first sentence in the third group (read first)",
-        parent: p3A1
+        parent: p3A1,
     });
     const s3A1B = createSpan({
         id: "s3A1B",
         classAttr: "audio-sentence",
         content: "The second sentence in the thrid group (read second)",
-        parent: p3A1
+        parent: p3A1,
     });
     const toSort = [be1A, s2A1A, s2A1B, s3A1A, s3A1B];
     const output = sortAudioElements(toSort);
@@ -212,42 +212,42 @@ test("sortAudioElements re-orders blocks", () => {
         id: "tg1",
         classAttr: "bloom-translationGroup",
         tabindex: "1000",
-        parent: input
+        parent: input,
     });
     const be1A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The first block (read third)</p>",
         tabindex: "3", // should be ignored
-        parent: tg1
+        parent: tg1,
     });
 
     const tg2 = createDiv({
         id: "tg2",
         classAttr: "bloom-translationGroup",
         tabindex: "101",
-        parent: input
+        parent: input,
     });
     const be2A = createDiv({
         id: "be2A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The second block (read second)</p>",
         tabindex: "8000", // should be ignored
-        parent: tg2
+        parent: tg2,
     });
 
     const tg3 = createDiv({
         id: "tg1",
         classAttr: "bloom-translationGroup",
         tabindex: "11",
-        parent: input
+        parent: input,
     });
     const be3A = createDiv({
         id: "be1A",
         classAttr: "bloom-editable audio-sentence",
         content: "<p>The third block (read first)</p>",
         tabindex: "0", // should be ignored
-        parent: tg3
+        parent: tg3,
     });
 
     const toSort = [be1A, be2A, be3A];
diff --git a/src/narration.ts b/src/narration.ts
index c18718d5..b9b977ef 100644
--- a/src/narration.ts
+++ b/src/narration.ts
@@ -38,7 +38,7 @@ export enum PlaybackMode {
     VideoPaused, // video is paused
     AudioPlaying, // narration and/or animation are playing (or possibly finished)
     AudioPaused, // narration and/or animation are paused
-    MediaFinished // video, narration, and/or animation has played (possibly no media to play)
+    MediaFinished, // video, narration, and/or animation has played (possibly no media to play)
     // Note that music can be playing when the state is either AudioPlaying or MediaFinished.
 }
 
@@ -144,7 +144,7 @@ export function sortAudioElements(input: HTMLElement[]): HTMLElement[] {
         // Otherwise, determined by the numerical order of tab indexes.
         return parseInt(x.tabindex, 10) - parseInt(y.tabindex, 10);
     });
-    return keyedItems.map(x => x.item);
+    return keyedItems.map((x) => x.item);
 }
 
 function getTgTabIndex(input: HTMLElement): string | null {
@@ -355,14 +355,14 @@ function fixHighlighting(audioElements: HTMLElement[]) {
     // Note: Only relevant when playing by sentence (but note, this can make Record by Text Box -> Split or Record by Sentence, Play by Sentence)
     // Play by Text Box highlights the whole paragraph and none of this really matters.
     // (the span selector won't match anyway)
-    audioElements.forEach(audioElement => {
+    audioElements.forEach((audioElement) => {
         // FYI, don't need to process the bloom-linebreak spans. Nothing bad happens, just unnecessary.
         const matches = findAll(
             "span[id]:not(.bloom-linebreak)",
             audioElement,
-            true
+            true,
         );
-        matches.forEach(element => {
+        matches.forEach((element) => {
             // Remove all existing highlight classes from element and element's descendants.
             // These shouldn't be in the dom as the editor is supposed to clean them up,
             // but we have seen at least on case where it didn't. BL-13428.
@@ -371,9 +371,8 @@ function fixHighlighting(audioElements: HTMLElement[]) {
             // Simple check to help ensure that elements that don't need to be modified will remain untouched.
             // This doesn't consider whether text that shouldn't be highlighted is already in inside an
             // element with highlight disabled, but that's ok. The code down the stack checks that.
-            const containsNonHighlightText = !!element.innerText.match(
-                multiSpaceRegex
-            );
+            const containsNonHighlightText =
+                !!element.innerText.match(multiSpaceRegex);
 
             if (containsNonHighlightText) {
                 fixHighlightingInNode(element, element);
@@ -411,7 +410,7 @@ function fixHighlightingInNode(node: Node, startingSpan: HTMLSpanElement) {
     } else {
         // Recursive case
         const childNodesCopy = Array.from(node.childNodes); // Make a copy because node.childNodes is being mutated
-        childNodesCopy.forEach(childNode => {
+        childNodesCopy.forEach((childNode) => {
             fixHighlightingInNode(childNode, startingSpan);
         });
     }
@@ -422,11 +421,11 @@ function fixHighlightingInNode(node: Node, startingSpan: HTMLSpanElement) {
  */
 function fixHighlightingInTextNode(
     textNode: Node,
-    startingSpan: HTMLSpanElement
+    startingSpan: HTMLSpanElement,
 ) {
     if (textNode.nodeType !== Node.TEXT_NODE) {
         throw new Error(
-            "Invalid argument to fixMultiSpaceInTextNode: node must be a TextNode"
+            "Invalid argument to fixMultiSpaceInTextNode: node must be a TextNode",
         );
     }
 
@@ -446,12 +445,12 @@ function fixHighlightingInTextNode(
     while (
         (regexResult = multiSpaceRegexGlobal.exec(textNode.nodeValue)) != null
     ) {
-        regexResult.forEach(matchingText => {
+        regexResult.forEach((matchingText) => {
             matches.push({
                 text: matchingText,
                 startIndex:
                     multiSpaceRegexGlobal.lastIndex - matchingText.length,
-                endIndex: multiSpaceRegexGlobal.lastIndex // the index of the first character to exclude
+                endIndex: multiSpaceRegexGlobal.lastIndex, // the index of the first character to exclude
             });
         });
     }
@@ -468,7 +467,7 @@ function fixHighlightingInTextNode(
 
             const preMatchText = textNode.nodeValue.slice(
                 lastMatchEndIndex,
-                match.startIndex
+                match.startIndex,
             );
             lastMatchEndIndex = match.endIndex;
             if (preMatchText) newNodes.push(makeHighlightedSpan(preMatchText));
@@ -515,7 +514,7 @@ function playCurrentInternal() {
         const mediaPlayer = getPlayer();
         if (mediaPlayer) {
             const element = getCurrentNarrationPage().querySelector(
-                `#${currentAudioId}`
+                `#${currentAudioId}`,
             );
             if (!element || !canPlayAudio(element)) {
                 playEnded();
@@ -528,16 +527,16 @@ function playCurrentInternal() {
             subElementsWithTimings = [];
 
             const timingsStr: string | null = element.getAttribute(
-                "data-audioRecordingEndTimes"
+                "data-audioRecordingEndTimes",
             );
             if (timingsStr) {
                 const childSpanElements = element.querySelectorAll(
-                    `span.${kSegmentClass}`
+                    `span.${kSegmentClass}`,
                 );
                 const fields = timingsStr.split(" ");
                 const subElementCount = Math.min(
                     fields.length,
-                    childSpanElements.length
+                    childSpanElements.length,
                 );
 
                 for (let i = subElementCount - 1; i >= 0; --i) {
@@ -547,7 +546,7 @@ function playCurrentInternal() {
                     }
                     subElementsWithTimings.push([
                         childSpanElements.item(i),
-                        durationSecs
+                        durationSecs,
                     ]);
                 }
             } else {
@@ -559,7 +558,7 @@ function playCurrentInternal() {
             const currentSegment = element as HTMLElement;
             if (currentSegment && ToggleImageDescription) {
                 ToggleImageDescription?.raise(
-                    isImageDescriptionSegment(currentSegment)
+                    isImageDescriptionSegment(currentSegment),
                 );
             }
 
@@ -607,7 +606,7 @@ function handlePlayPromise(promise: Promise<void>, player?: HTMLMediaElement) {
                 reason
                     .toString()
                     .includes(
-                        "The play() request was interrupted by a call to pause()."
+                        "The play() request was interrupted by a call to pause().",
                     )
             ) {
                 // We were getting this error Aug 2020. I tried wrapping the line above which calls mediaPlayer.play()
@@ -617,7 +616,7 @@ function handlePlayPromise(promise: Promise<void>, player?: HTMLMediaElement) {
                 // I fixed that in bloom-player-core. But I wanted to document the possible setTimeout fix here
                 // in case this issue ever comes up for a different reason.
                 console.log(
-                    "See comment in narration.ts for possibly useful information regarding this error."
+                    "See comment in narration.ts for possibly useful information regarding this error.",
                 );
             }
 
@@ -650,7 +649,7 @@ function handlePlayPromise(promise: Promise<void>, player?: HTMLMediaElement) {
 // startTimeInSecs is an optional fallback that will be used in case the currentTime cannot be determined from the audio player element.
 function highlightNextSubElement(
     originalSessionNum: number,
-    startTimeInSecs: number = 0
+    startTimeInSecs: number = 0,
 ) {
     // the item should not be popped off the stack until it's completely done with.
     const subElementCount = subElementsWithTimings.length;
@@ -666,11 +665,11 @@ function highlightNextSubElement(
     setHighlightTo({
         newElement: element,
         shouldScrollToElement: true,
-        disableHighlightIfNoAudio: false
+        disableHighlightIfNoAudio: false,
     });
 
     const mediaPlayer: HTMLMediaElement = document.getElementById(
-        "bloom-audio-player"
+        "bloom-audio-player",
     )! as HTMLMediaElement;
     let currentTimeInSecs: number = mediaPlayer.currentTime;
     if (currentTimeInSecs <= 0) {
@@ -710,7 +709,7 @@ function onSubElementHighlightTimeEnded(originalSessionNum: number) {
     }
 
     const mediaPlayer: HTMLMediaElement = document.getElementById(
-        "bloom-audio-player"
+        "bloom-audio-player",
     )! as HTMLMediaElement;
     if (mediaPlayer.ended || mediaPlayer.error) {
         // audio playback ended. No need to highlight anything else.
@@ -749,15 +748,14 @@ function removeAudioCurrent(around: HTMLElement = document.body) {
     // Note that HTMLCollectionOf's length can change if you change the number of elements matching the selector.
     // For safety we get rid of all existing ones.
     const audioCurrentArray = Array.from(
-        around.ownerDocument.getElementsByClassName("ui-audioCurrent")
+        around.ownerDocument.getElementsByClassName("ui-audioCurrent"),
     );
 
     for (let i = 0; i < audioCurrentArray.length; i++) {
         audioCurrentArray[i].classList.remove("ui-audioCurrent");
     }
-    const currentImg = around.ownerDocument.getElementsByClassName(
-        "ui-audioCurrentImg"
-    )[0];
+    const currentImg =
+        around.ownerDocument.getElementsByClassName("ui-audioCurrentImg")[0];
     if (currentImg) {
         currentImg.classList.remove("ui-audioCurrentImg");
     }
@@ -766,13 +764,13 @@ function removeAudioCurrent(around: HTMLElement = document.body) {
 function setSoundAndHighlight(
     newElement: Element,
     disableHighlightIfNoAudio: boolean,
-    oldElement?: Element | null | undefined
+    oldElement?: Element | null | undefined,
 ) {
     setHighlightTo({
         newElement,
         shouldScrollToElement: true, // Always true in bloom-player version
         disableHighlightIfNoAudio,
-        oldElement
+        oldElement,
     });
     setSoundFrom(newElement);
 }
@@ -781,7 +779,7 @@ function setHighlightTo({
     newElement,
     shouldScrollToElement,
     disableHighlightIfNoAudio,
-    oldElement
+    oldElement,
 }: ISetHighlightParams) {
     // This should happen even if oldElement and newElement are the same.
     if (shouldScrollToElement) {
@@ -897,7 +895,7 @@ function scrollElementIntoView(element: Element) {
         // Seems to reduce unnecessary scrolling compared to start (aka true) or end (aka false).
         // Refer to https://drafts.csswg.org/cssom-view/#scroll-an-element-into-view,
         // which seems to imply that it won't do any scrolling if the two relevant edges are already inside.
-        block: "nearest"
+        block: "nearest",
 
         // horizontal alignment is controlled by "inline". We'll leave it as its default ("nearest")
         // which typically won't move things at all horizontally
@@ -922,7 +920,7 @@ function setSoundFrom(element: Element) {
 }
 
 function getFirstAudioSentenceWithinElement(
-    element: Element | null
+    element: Element | null,
 ): Element | null {
     const audioSentences = getAudioSegmentsWithinElement(element);
     if (!audioSentences || audioSentences.length === 0) {
@@ -979,7 +977,7 @@ function updatePlayerStatus() {
     // other contexts.
     player.setAttribute(
         "src",
-        url + "?nocache=" + new Date().getTime() + "&optional=true"
+        url + "?nocache=" + new Date().getTime() + "&optional=true",
     );
 }
 
@@ -989,7 +987,7 @@ function currentAudioUrl(id: string): string {
 }
 
 function getPlayer(): HTMLMediaElement {
-    const audio = getAudio("bloom-audio-player", a => {
+    const audio = getAudio("bloom-audio-player", (a) => {
         a.addEventListener("ended", playEnded);
         a.addEventListener("error", handlePlayError);
     });
@@ -1045,7 +1043,7 @@ function reportPlayDuration() {
 
 function getAudio(id: string, init: (audio: HTMLAudioElement) => void) {
     let player: HTMLAudioElement | null = document.querySelector(
-        "#" + id
+        "#" + id,
     ) as HTMLAudioElement;
     // If (somehow?) it exists but is not a valid HTMLAudioElement, remove it.
     if (player && !player.play) {
@@ -1091,11 +1089,11 @@ function handlePlayError() {
 function findAll(
     expr: string,
     container: HTMLElement,
-    includeSelf: boolean = false
+    includeSelf: boolean = false,
 ): HTMLElement[] {
     // querySelectorAll checks all the descendants
     const allMatches: HTMLElement[] = [].slice.call(
-        (container || document).querySelectorAll(expr)
+        (container || document).querySelectorAll(expr),
     );
 
     // Now check itself
@@ -1105,14 +1103,14 @@ function findAll(
 
     return includeImageDescriptions
         ? allMatches
-        : allMatches.filter(match => !isImageDescriptionSegment(match));
+        : allMatches.filter((match) => !isImageDescriptionSegment(match));
 }
 
 function getPlayableDivs(container: HTMLElement) {
     // We want to play any audio we have from divs the user can see.
     // This is a crude test, but currently we always use display:none to hide unwanted languages.
     return findAll(".bloom-editable", container).filter(
-        e => window.getComputedStyle(e).display !== "none"
+        (e) => window.getComputedStyle(e).display !== "none",
     );
 }
 
@@ -1127,7 +1125,9 @@ function getPagePlayableDivs(page?: HTMLElement): HTMLElement[] {
 function getPageAudioElements(page?: HTMLElement): HTMLElement[] {
     return [].concat.apply(
         [],
-        getPagePlayableDivs(page).map(x => findAll(".audio-sentence", x, true))
+        getPagePlayableDivs(page).map((x) =>
+            findAll(".audio-sentence", x, true),
+        ),
     );
 }
 
@@ -1211,7 +1211,7 @@ function pausePlaying() {
 // So I decided to simplify.
 export function computeDuration(page: HTMLElement): number {
     let pageDuration = 0.0;
-    getPageAudioElements(page).forEach(segment => {
+    getPageAudioElements(page).forEach((segment) => {
         const attrDuration = segment.getAttribute("data-duration");
         if (attrDuration) {
             pageDuration += parseFloat(attrDuration);
@@ -1276,10 +1276,10 @@ export function playAllVideo(elements: HTMLVideoElement[], then: () => void) {
                     () => {
                         playAllVideo(elements.slice(1), then);
                     },
-                    { once: true }
+                    { once: true },
                 );
             })
-            .catch(reason => {
+            .catch((reason) => {
                 console.error("Video play failed", reason);
                 showVideoError(video);
                 this.playAllVideo(elements.slice(1), then);
diff --git a/src/page-api.ts b/src/page-api.ts
index a3f2c781..820a3805 100644
--- a/src/page-api.ts
+++ b/src/page-api.ts
@@ -43,7 +43,7 @@ export function reportScoreForCurrentPage(
     possiblePoints: number,
     actualPoints: number,
     analyticsCategory: string,
-    pagesToGroupForAnalytics: number[] | undefined
+    pagesToGroupForAnalytics: number[] | undefined,
 ): void {
     if (!BloomPlayerCore.getCurrentPage()) {
         alert("null currentPage in reportScoreForCurrentPage()");
@@ -62,7 +62,7 @@ export function reportScoreForCurrentPage(
     storePageData(
         pageIndex,
         analyticsCategory,
-        JSON.stringify({ possiblePoints, actualPoints, analyticsCategory })
+        JSON.stringify({ possiblePoints, actualPoints, analyticsCategory }),
     );
 
     // See if we now have a score from all pages of this analyticsCategory.
@@ -77,7 +77,7 @@ export function reportScoreForCurrentPage(
         for (let index = 0; index < pagesToGroupForAnalytics.length; index++) {
             const scoreObjectString = getPageData(
                 pagesToGroupForAnalytics[index],
-                analyticsCategory
+                analyticsCategory,
             );
             if (!scoreObjectString) {
                 return; // don't have all the results yet, wait for more
@@ -101,7 +101,7 @@ export function reportScoreForCurrentPage(
     const params = {
         possiblePoints: totalPossiblePoints,
         actualPoints: totalActualPoints,
-        percentRight: (totalActualPoints * 100) / totalPossiblePoints
+        percentRight: (totalActualPoints * 100) / totalPossiblePoints,
     };
     reportAnalytics(analyticsCategory, params);
 }
@@ -112,7 +112,7 @@ export function reportScoreForCurrentPage(
 export function storePageData(
     pageIndex: number,
     key: string,
-    value: string
+    value: string,
 ): void {
     const fullKey = getFullDataKey(pageIndex, key);
     // Store so that a getPageData() will return this value (even if no parent window implements saving)
diff --git a/src/test/testHelper.ts b/src/test/testHelper.ts
index d106ff4e..cabab2a4 100644
--- a/src/test/testHelper.ts
+++ b/src/test/testHelper.ts
@@ -3,7 +3,7 @@ export function createDiv({
     classAttr,
     content,
     tabindex,
-    parent
+    parent,
 }: {
     id?: string;
     classAttr?: string;
@@ -17,7 +17,7 @@ export function createDiv({
         classAttr,
         content,
         tabindex,
-        parent
+        parent,
     });
 }
 
@@ -25,7 +25,7 @@ export function createDataDivItem({
     key,
     lang,
     content,
-    parent
+    parent,
 }: {
     key: string;
     lang: string;
@@ -47,7 +47,7 @@ export function createSpan(params: {
 }): HTMLElement {
     return createElement({
         tag: "span",
-        ...params
+        ...params,
     });
 }
 
@@ -60,7 +60,7 @@ export function createPara(params: {
 }): HTMLElement {
     return createElement({
         tag: "p",
-        ...params
+        ...params,
     });
 }
 
@@ -70,7 +70,7 @@ export function createElement({
     classAttr,
     content,
     tabindex,
-    parent
+    parent,
 }: {
     tag: string;
     id?: string;
diff --git a/src/transientPageData.ts b/src/transientPageData.ts
index 8c964b78..a90efb1f 100644
--- a/src/transientPageData.ts
+++ b/src/transientPageData.ts
@@ -16,4 +16,4 @@ class TransientPageData {
 }
 
 // This is the one instance of this class.
-export const TransientPageDataSingleton = new TransientPageData();
\ No newline at end of file
+export const TransientPageDataSingleton = new TransientPageData();
diff --git a/src/utilities/domHelper.test.ts b/src/utilities/domHelper.test.ts
index 014642a6..f8a8abfa 100644
--- a/src/utilities/domHelper.test.ts
+++ b/src/utilities/domHelper.test.ts
@@ -8,12 +8,12 @@ const cases = [
     ["url('abc - (1).jpg')", "abc - (1).jpg"],
     ["url('abc%20-%20(1).jpg')", "abc%20-%20(1).jpg"],
     ["inherit", ""],
-    ["", ""]
+    ["", ""],
 ];
 test.each(cases)("getActualUrlFromCSSPropertyValue", (input, expected) => {
     expect(input).not.toBeUndefined();
 
     expect(DomHelper.getActualUrlFromCSSPropertyValue(input!)).toEqual(
-        expected
+        expected,
     );
 });
diff --git a/src/utilities/math.test.ts b/src/utilities/math.test.ts
index c6f5bf59..c65758f4 100644
--- a/src/utilities/math.test.ts
+++ b/src/utilities/math.test.ts
@@ -7,14 +7,14 @@ const roundToNearestEvenCases = [
     [2.99, 2],
     [3, 4],
     [3.99, 4],
-    [4, 4]
+    [4, 4],
 ];
 test.each(roundToNearestEvenCases)(
     "roundToNearestK, k=2",
     (input, expected) => {
         const result = roundToNearestK(input, 2);
         expect(result).toEqual(expected);
-    }
+    },
 );
 
 const roundToNearest4Cases = [
@@ -24,7 +24,7 @@ const roundToNearest4Cases = [
     [2, 4],
     [3, 4],
     [3.99, 4],
-    [4, 4]
+    [4, 4],
 ];
 
 test.each(roundToNearest4Cases)("roundToNearestK, k=4", (input, expected) => {
diff --git a/src/utilities/urlUtils.ts b/src/utilities/urlUtils.ts
index 6eab6cfa..ba800e41 100644
--- a/src/utilities/urlUtils.ts
+++ b/src/utilities/urlUtils.ts
@@ -6,24 +6,24 @@
 // to a non-checked call.
 export function getQueryStringParamAndUnencode(
     paramName: string,
-    defaultValue?: any
+    defaultValue?: any,
 ): string {
     return getStringUrlParam(paramName, defaultValue);
 }
 
 export function getStringUrlParam(
     paramName: string,
-    defaultValue: string
+    defaultValue: string,
 ): string;
 export function getStringUrlParam(
     paramName: string,
-    defaultValue?: string | undefined
+    defaultValue?: string | undefined,
 ): string | undefined;
 export function getStringUrlParam(
     paramName: string,
-    defaultValue?: string | undefined
+    defaultValue?: string | undefined,
 ): string | undefined {
-    return getUrlParam(paramName, s => s, defaultValue);
+    return getUrlParam(paramName, (s) => s, defaultValue);
 }
 /**
  * Finds the specified query param string in the URL and returns the deserialized value
@@ -35,7 +35,7 @@ export function getStringUrlParam(
 export function getUrlParam<T>(
     paramName: string,
     deserializeCallback: (s: string) => T,
-    defaultValue: T
+    defaultValue: T,
 ): T {
     const values = parseUriComponent(window.location.search);
     if (
@@ -64,7 +64,7 @@ export function parseUriComponent(searchPortionOfLocation: string): object {
 
 export function getBooleanUrlParam(
     paramName: string,
-    defaultValue: boolean
+    defaultValue: boolean,
 ): boolean {
     const toBool = (s: string) => s.toLowerCase() === "true";
     return getUrlParam(paramName, toBool, defaultValue);
diff --git a/src/video.ts b/src/video.ts
index b70193a3..22056694 100644
--- a/src/video.ts
+++ b/src/video.ts
@@ -6,7 +6,7 @@ import {
     setCurrentPlaybackMode,
     PlaybackMode,
     hideVideoError,
-    showVideoError
+    showVideoError,
 } from "./narration";
 import { getPlayIcon } from "./playIcon";
 import { getPauseIcon } from "./pauseIcon";
@@ -36,7 +36,7 @@ export class Video {
     private wrapVideoIcon(
         videoElement: HTMLVideoElement,
         icon: HTMLElement,
-        iconClass: string
+        iconClass: string,
     ): HTMLElement {
         const wrapper = document.createElement("div");
         wrapper.classList.add("videoControlContainer");
@@ -55,7 +55,7 @@ export class Video {
             this.currentVideoElement = undefined;
             return;
         }
-        this.getVideoElements().forEach(videoElement => {
+        this.getVideoElements().forEach((videoElement) => {
             videoElement.removeAttribute("controls");
             videoElement.addEventListener("click", this.handleVideoClick);
             const playButton = this.wrapVideoIcon(
@@ -66,19 +66,19 @@ export class Video {
                 // React for anything except to make use of an image which unfortunately is only
                 // available by default as a component.
                 getPlayIcon("#ffffff"),
-                "videoPlayIcon"
+                "videoPlayIcon",
             );
             playButton.addEventListener("click", this.handlePlayClick);
             const pauseButton = this.wrapVideoIcon(
                 videoElement,
                 getPauseIcon("#ffffff"),
-                "videoPauseIcon"
+                "videoPauseIcon",
             );
             pauseButton.addEventListener("click", this.handlePauseClick);
             const replayButton = this.wrapVideoIcon(
                 videoElement,
                 getReplayIcon("#ffffff"),
-                "videoReplayIcon"
+                "videoReplayIcon",
             );
             replayButton.addEventListener("click", this.handleReplayClick);
 
@@ -131,8 +131,8 @@ export class Video {
 
     private static getVideoElements(page: HTMLElement): HTMLVideoElement[] {
         return Array.from(page.getElementsByClassName("bloom-videoContainer"))
-            .map(container => container.getElementsByTagName("video")[0])
-            .filter(video => video !== undefined);
+            .map((container) => container.getElementsByTagName("video")[0])
+            .filter((video) => video !== undefined);
     }
     private getVideoElements(): HTMLVideoElement[] {
         return Video.getVideoElements(this.currentPage);
@@ -193,7 +193,7 @@ export class Video {
         if (this.currentVideoElement) {
             // get subset of allVideoElements starting with currentVideoElement
             const startIndex = allVideoElements.indexOf(
-                this.currentVideoElement
+                this.currentVideoElement,
             );
             videoElements = allVideoElements.slice(startIndex);
         }
@@ -220,8 +220,8 @@ export class Video {
         // This also cleans up after the last one finishes.
         if (this.currentPage) {
             Array.from(
-                this.currentPage.getElementsByClassName("playing")
-            ).forEach(element => element.classList.remove("playing"));
+                this.currentPage.getElementsByClassName("playing"),
+            ).forEach((element) => element.classList.remove("playing"));
         }
         const videoElement = this.currentVideoElement;
         if (!videoElement) {
@@ -234,7 +234,7 @@ export class Video {
         ) {
             // It's playing, and we're about to stop it...report how long it's been going.
             this.reportVideoPlayed(
-                videoElement.currentTime - this.currentVideoStartTime
+                videoElement.currentTime - this.currentVideoStartTime,
             );
         }
         videoElement?.closest(".bloom-videoContainer")?.classList.add("paused");
@@ -260,25 +260,25 @@ export class Video {
     // Note, there is a very similar function in narration.ts. It would be nice to combine them, but
     // this one must be here and must be part of the Video class so it can handle play/pause, analytics, etc.
     public playAllVideo(elements: HTMLVideoElement[]) {
-        Array.from(
-            this.currentPage.getElementsByClassName("playing")
-        ).forEach(element => element.classList.remove("playing"));
+        Array.from(this.currentPage.getElementsByClassName("playing")).forEach(
+            (element) => element.classList.remove("playing"),
+        );
         if (elements.length === 0) {
             this.currentVideoElement = undefined;
             this.isPlayingSingleVideo = false;
             if (this.PageVideoComplete) {
                 this.PageVideoComplete.raise({
                     page: this.currentPage,
-                    videos: this.getVideoElements()
+                    videos: this.getVideoElements(),
                 });
             }
             return;
         }
 
         // Remove the paused class from all videos on the page. We're playing.
-        Array.from(
-            this.currentPage.getElementsByClassName("paused")
-        ).forEach(element => element.classList.remove("paused"));
+        Array.from(this.currentPage.getElementsByClassName("paused")).forEach(
+            (element) => element.classList.remove("paused"),
+        );
 
         const video = elements[0];
 
@@ -310,7 +310,7 @@ export class Video {
                         "ended",
                         () => {
                             this.reportVideoPlayed(
-                                video.currentTime - this.currentVideoStartTime
+                                video.currentTime - this.currentVideoStartTime,
                             );
                             // reset it, to make it obvious it can be replayed.
                             // Note: if we decide to show a play (or any) button here, we should do it only if
@@ -319,10 +319,10 @@ export class Video {
                             video.currentTime = 0;
                             this.playAllVideo(elements.slice(1));
                         },
-                        { once: true }
+                        { once: true },
                     );
                 })
-                .catch(reason => {
+                .catch((reason) => {
                     console.error("Video play failed", reason);
                     showVideoError(video);
                     this.playAllVideo(elements.slice(1));
diff --git a/src/videoRecordingSupport.ts b/src/videoRecordingSupport.ts
index ac2737fd..d1ebe5e8 100644
--- a/src/videoRecordingSupport.ts
+++ b/src/videoRecordingSupport.ts
@@ -14,7 +14,7 @@ let soundsPlayed: SoundData[] = [];
 
 // Log, for later reporting with reportSoundsLogged, that we are starting to play
 // a sound with the specified src url at the specified volume.
-// Returns a number identifiying this particular sound which may later be passed
+// Returns a number identifying this particular sound which may later be passed
 // to other log functions.
 export function logSound(src: string, volume: Number): number {
     const index = soundsPlayed.length;
@@ -45,7 +45,7 @@ export function logSoundRepeat(index: number): number {
     const newIndex = soundsPlayed.length;
     soundsPlayed.push({
         ...soundsPlayed[index],
-        startTime: new Date().toISOString()
+        startTime: new Date().toISOString(),
     });
     return newIndex;
 }
@@ -57,13 +57,13 @@ export function reportSoundsLogged(): void {
     sendToBloomApi(
         "publish/av/soundLog",
         soundsPlayed,
-        "application/json; charset=utf-8"
+        "application/json; charset=utf-8",
     );
 }
 
 export function sendStringToBloomApi(
     urlSuffix: string,
-    data: any
+    data: any,
 ): AxiosPromise<any> {
     return sendToBloomApi(urlSuffix, data, "text/plain");
 }
@@ -71,11 +71,11 @@ export function sendStringToBloomApi(
 function sendToBloomApi(
     urlSuffix: string,
     data: any,
-    contentType: string
+    contentType: string,
 ): AxiosPromise<any> {
     return axios.post("/bloom/api/" + urlSuffix, data, {
         headers: {
-            "Content-Type": contentType
-        }
+            "Content-Type": contentType,
+        },
     });
 }