@@ -140,6 +151,12 @@ export const PageMetadata = (props: PageMetadataProps) => {
{isPhy && }
{isConcept && }
+ {pageContainsClozeOrDragAndDropQuestion && (
+ <>
+
+
+
+ )}
{isPhy &&
}
diff --git a/src/app/state/selectors.tsx b/src/app/state/selectors.tsx
index 5f978da394..72aaee2f14 100644
--- a/src/app/state/selectors.tsx
+++ b/src/app/state/selectors.tsx
@@ -46,6 +46,9 @@ export const selectors = {
},
includesLLMFreeTextQuestion: (state: AppState) => {
return !!state?.questions?.questions.some(q => q.type === "isaacLLMFreeTextQuestion");
+ },
+ includesClozeOrDragAndDropQuestion: (state: AppState) => {
+ return !!state?.questions?.questions.some(q => q.type === "isaacClozeQuestion" || q.type === "isaacDragAndDropQuestion");
}
},
From 547e8e6ea9e12e2141bcc95d8304624407a29808 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Wed, 13 May 2026 13:21:59 +0100
Subject: [PATCH 07/23] Add basic accessibility type redux structures
---
src/IsaacAppTypes.tsx | 2 +-
src/app/services/constants.ts | 2 ++
src/app/state/reducers/index.ts | 4 ++++
src/app/state/reducers/userState.ts | 12 ++++++++++++
src/app/state/selectors.tsx | 4 ++++
5 files changed, 23 insertions(+), 1 deletion(-)
diff --git a/src/IsaacAppTypes.tsx b/src/IsaacAppTypes.tsx
index 68cf1fb63e..afc59b8b6c 100644
--- a/src/IsaacAppTypes.tsx
+++ b/src/IsaacAppTypes.tsx
@@ -61,7 +61,7 @@ export type Action =
| {type: ACTION_TYPE.USER_PREFERENCES_REQUEST}
| {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS; userPreferences: UserPreferencesDTO}
| {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_FAILURE; errorMessage: string}
-
+ | {type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET; accessibilityType: UserPreferencesDTO}
| {type: ACTION_TYPE.USER_LOG_IN_REQUEST; provider: ApiTypes.AuthenticationProvider}
| {type: ACTION_TYPE.USER_LOG_IN_RESPONSE_SUCCESS; authResponse: ApiTypes.AuthenticationResponseDTO}
| {type: ACTION_TYPE.USER_LOG_IN_RESPONSE_FAILURE; errorMessage: string}
diff --git a/src/app/services/constants.ts b/src/app/services/constants.ts
index 7b71ff085a..bcb78a05e5 100644
--- a/src/app/services/constants.ts
+++ b/src/app/services/constants.ts
@@ -130,6 +130,8 @@ export enum ACTION_TYPE {
USER_PREFERENCES_RESPONSE_SUCCESS= "USER_PREFERENCES_RESPONSE_SUCCESS",
USER_PREFERENCES_RESPONSE_FAILURE = "USER_PREFERENCES_RESPONSE_FAILURE",
+ ACCESSIBILITY_TYPE_SET = "ACCESSIBILITY_TYPE_SET",
+
USER_PASSWORD_RESET_REQUEST= "USER_PASSWORD_RESET_REQUEST",
USER_PASSWORD_RESET_RESPONSE_SUCCESS ="USER_PASSWORD_RESET_RESPONSE_SUCCESS",
USER_PASSWORD_RESET_RESPONSE_FAILURE = "USER_PASSWORD_RESET_RESPONSE_FAILURE",
diff --git a/src/app/state/reducers/index.ts b/src/app/state/reducers/index.ts
index c0315fa53a..883b4dd27f 100644
--- a/src/app/state/reducers/index.ts
+++ b/src/app/state/reducers/index.ts
@@ -29,6 +29,7 @@ import {
topicSlice,
linkableSettingSlice,
sidebarSlice,
+ accessibilityType,
} from "../index";
export const rootReducer = combineReducers({
@@ -90,6 +91,9 @@ export const rootReducer = combineReducers({
// Linkable settings
linkableSetting: linkableSettingSlice.reducer,
+ // Accessibility
+ accessibilityType,
+
// API reducer
[isaacApi.reducerPath]: isaacApi.reducer
});
diff --git a/src/app/state/reducers/userState.ts b/src/app/state/reducers/userState.ts
index aa89ae9cdc..2c9c02a379 100644
--- a/src/app/state/reducers/userState.ts
+++ b/src/app/state/reducers/userState.ts
@@ -40,3 +40,15 @@ export const totpChallengePending = (totpChallengePending: TotpChallengePendingS
return totpChallengePending;
}
};
+
+type AccessibilityTypeState = UserPreferencesDTO | null;
+export const accessibilityType = (accessibilityType: AccessibilityTypeState = null, action: Action) => {
+ switch (action.type) {
+ case ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS:
+ return action.userPreferences;
+ case ACTION_TYPE.ACCESSIBILITY_TYPE_SET:
+ return action.accessibilityType;
+ default:
+ return accessibilityType;
+ }
+};
diff --git a/src/app/state/selectors.tsx b/src/app/state/selectors.tsx
index 72aaee2f14..59b66feb52 100644
--- a/src/app/state/selectors.tsx
+++ b/src/app/state/selectors.tsx
@@ -94,6 +94,10 @@ export const selectors = {
previousContext: (state: AppState) => state?.pageContext?.previousContext ?? undefined,
stage: (state: AppState) => state?.pageContext?.stage,
subject: (state: AppState) => state?.pageContext?.subject,
+ },
+
+ accessibility: {
+ type: (state: AppState) => state?.accessibilityType
}
};
From 602c7f7e7bafcd9596f3f02b66c628f0900ed8e4 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Thu, 14 May 2026 15:13:55 +0100
Subject: [PATCH 08/23] Update test and add test with hydrate
---
src/test/components/content/IsaacSymbolicQuestion.test.tsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/test/components/content/IsaacSymbolicQuestion.test.tsx b/src/test/components/content/IsaacSymbolicQuestion.test.tsx
index 8d95880a0b..2a689b07d0 100644
--- a/src/test/components/content/IsaacSymbolicQuestion.test.tsx
+++ b/src/test/components/content/IsaacSymbolicQuestion.test.tsx
@@ -56,7 +56,8 @@ describe("IsaacSymbolicQuestion", () => {
// misc errors
expect(symbolicChemistryInputValidator("2H2O -> 2H2 + O2")).toEqual([]);
expect(symbolicChemistryInputValidator("2(H2O")).toEqual(['You are missing some brackets.']);
- expect(symbolicChemistryInputValidator(".5")).toEqual(['Please convert decimal numbers to fractions.']);
+ expect(symbolicChemistryInputValidator("2.5")).toEqual(['Please convert decimal numbers to fractions.']);
+ expect(symbolicChemistryInputValidator("C2.5H2O")).toEqual([]);
expect(symbolicChemistryInputValidator("2H2O(l) -> 2H2(g) + O2(g)")).toEqual(['This question does not require state symbols.']);
expect(symbolicTextInputValidator("2H2O(l) -> 2H2(g) + O2(g)", "chemistry", true)).toEqual([]);
});
From 3a16039b6c0bad93d95256157becc1ff993d54dd Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Thu, 14 May 2026 15:15:25 +0100
Subject: [PATCH 09/23] Revert "Update test and add test with hydrate"
This reverts commit 602c7f7e7bafcd9596f3f02b66c628f0900ed8e4.
---
src/test/components/content/IsaacSymbolicQuestion.test.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/test/components/content/IsaacSymbolicQuestion.test.tsx b/src/test/components/content/IsaacSymbolicQuestion.test.tsx
index 2a689b07d0..8d95880a0b 100644
--- a/src/test/components/content/IsaacSymbolicQuestion.test.tsx
+++ b/src/test/components/content/IsaacSymbolicQuestion.test.tsx
@@ -56,8 +56,7 @@ describe("IsaacSymbolicQuestion", () => {
// misc errors
expect(symbolicChemistryInputValidator("2H2O -> 2H2 + O2")).toEqual([]);
expect(symbolicChemistryInputValidator("2(H2O")).toEqual(['You are missing some brackets.']);
- expect(symbolicChemistryInputValidator("2.5")).toEqual(['Please convert decimal numbers to fractions.']);
- expect(symbolicChemistryInputValidator("C2.5H2O")).toEqual([]);
+ expect(symbolicChemistryInputValidator(".5")).toEqual(['Please convert decimal numbers to fractions.']);
expect(symbolicChemistryInputValidator("2H2O(l) -> 2H2(g) + O2(g)")).toEqual(['This question does not require state symbols.']);
expect(symbolicTextInputValidator("2H2O(l) -> 2H2(g) + O2(g)", "chemistry", true)).toEqual([]);
});
From 03de124c1552724b9a6ed4fbd66cbc11394fbcf0 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Fri, 15 May 2026 15:10:19 +0100
Subject: [PATCH 10/23] Add rest of accessibility_type reducer settings
---
src/IsaacAppTypes.tsx | 2 +-
.../content/IsaacDragAndDropQuestion.tsx | 11 +++++++++--
src/app/components/elements/PageMetadata.tsx | 16 ++++++++++++----
src/app/state/reducers/userState.ts | 6 +++---
4 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/src/IsaacAppTypes.tsx b/src/IsaacAppTypes.tsx
index afc59b8b6c..83114c7c8f 100644
--- a/src/IsaacAppTypes.tsx
+++ b/src/IsaacAppTypes.tsx
@@ -61,7 +61,7 @@ export type Action =
| {type: ACTION_TYPE.USER_PREFERENCES_REQUEST}
| {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS; userPreferences: UserPreferencesDTO}
| {type: ACTION_TYPE.USER_PREFERENCES_RESPONSE_FAILURE; errorMessage: string}
- | {type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET; accessibilityType: UserPreferencesDTO}
+ | {type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET; accessibilityType: AccessibilitySettings}
| {type: ACTION_TYPE.USER_LOG_IN_REQUEST; provider: ApiTypes.AuthenticationProvider}
| {type: ACTION_TYPE.USER_LOG_IN_RESPONSE_SUCCESS; authResponse: ApiTypes.AuthenticationResponseDTO}
| {type: ACTION_TYPE.USER_LOG_IN_RESPONSE_FAILURE; errorMessage: string}
diff --git a/src/app/components/content/IsaacDragAndDropQuestion.tsx b/src/app/components/content/IsaacDragAndDropQuestion.tsx
index 08b86fbf22..3360cc29fd 100644
--- a/src/app/components/content/IsaacDragAndDropQuestion.tsx
+++ b/src/app/components/content/IsaacDragAndDropQuestion.tsx
@@ -46,6 +46,7 @@ import StyledToggle from "../elements/inputs/StyledToggle";
import { useAccessibilitySettings } from "../../services/accessibility";
import { Spacer } from "../elements/Spacer";
import classNames from "classnames";
+import { selectors, useAppSelector } from "../../state";
const DropZoneItem = lazy(() => import("../elements/DnDItem"));
@@ -141,6 +142,9 @@ const useAutoScroll = ({active, acceleration, interval}: {active: boolean; accel
export const useDefaultDragAndDropInputMode = () => {
const accessibilitySettings = useAccessibilitySettings();
const deviceSize = useDeviceSize();
+ const accessibilityType = useAppSelector(selectors.accessibility.type);
+ console.log("ac", accessibilityType);
+
return !(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)) || accessibilitySettings.NON_DRAGGING_INPUTS || false);
};
@@ -185,6 +189,9 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
setDragAndDropEnabled(defaultDragAndDropInputMode);
}, [defaultDragAndDropInputMode]);
+ const accessibilityType = useAppSelector(selectors.accessibility.type);
+ const dragAndDropEnabled2 = accessibilityType?.NON_DRAGGING_INPUTS === false;
+
const cssFriendlyQuestionPartId = questionId?.replace(/\|/g, '-') ?? ""; // Maybe we should clean up IDs more?
const withReplacement = doc.withReplacement ?? false;
@@ -541,7 +548,7 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
nonSelectedItems,
allItems,
zoneIds: new Set
(),
- dragAndDropEnabled
+ dragAndDropEnabled: dragAndDropEnabled2
}}>
- {dragAndDropEnabled && <>
+ {dragAndDropEnabled2 && <>
{/* The item attached to the users cursor while dragging (just for display, shouldn't contain useDraggable/useSortable hooks) */}
{activeItem &&
diff --git a/src/app/components/elements/PageMetadata.tsx b/src/app/components/elements/PageMetadata.tsx
index 0805524d1f..271186aba0 100644
--- a/src/app/components/elements/PageMetadata.tsx
+++ b/src/app/components/elements/PageMetadata.tsx
@@ -9,13 +9,13 @@ import { TeacherNotes } from './TeacherNotes';
import { useLocation } from 'react-router';
import { SidebarButton } from './SidebarButton';
import { HelpButton } from './HelpButton';
-import { above, below, isAda, isPhy, useDeviceSize } from '../../services';
+import { above, ACTION_TYPE, below, isAda, isPhy, useDeviceSize } from '../../services';
import type { Location } from 'history';
import classNames from 'classnames';
import { UserContextPicker } from './inputs/UserContextPicker';
import { LLMFreeTextQuestionIndicator } from './LLMFreeTextQuestionIndicator';
import { CrossTopicQuestionIndicator } from './CrossTopicQuestionIndicator';
-import { selectors, useAppSelector } from '../../state';
+import { selectors, useAppDispatch, useAppSelector } from '../../state';
import { BookmarkButton } from './BookmarkButton';
import { FeatureFlag, FeatureFlagWrapper } from '../../services/featureFlag';
import { DragAndDropInputModeToggle, useDefaultDragAndDropInputMode } from '../content/IsaacDragAndDropQuestion';
@@ -119,6 +119,7 @@ export const PageMetadata = (props: PageMetadataProps) => {
const deviceSize = useDeviceSize();
const actionButtonsFloat = noTitle && children;
+ const dispatch = useAppDispatch();
const pageContainsClozeOrDragAndDropQuestion = useAppSelector(selectors.questions.includesClozeOrDragAndDropQuestion);
const defaultDragAndDropInputMode = useDefaultDragAndDropInputMode();
const [dragAndDropEnabled, setDragAndDropEnabled] = useState(true);
@@ -126,6 +127,12 @@ export const PageMetadata = (props: PageMetadataProps) => {
// Portals need a drop zone to attach to on first render, so we start with drag and drop enabled to ensure these are created, then disable here if needed
setDragAndDropEnabled(defaultDragAndDropInputMode);
}, [defaultDragAndDropInputMode]);
+
+ const accessibilityType = useAppSelector(selectors.accessibility.type);
+ const dragAndDropEnabled2 = accessibilityType?.NON_DRAGGING_INPUTS === true;
+ const setDragAndDropEnabled2 = (enabled: boolean) => {
+ dispatch({type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET, accessibilityType: {"NON_DRAGGING_INPUTS": enabled}});
+ };
return <>
@@ -151,10 +158,10 @@ export const PageMetadata = (props: PageMetadataProps) => {
{isPhy && }
{isConcept && }
- {pageContainsClozeOrDragAndDropQuestion && (
+ {!pageContainsClozeOrDragAndDropQuestion && (
<>
-
+
)}
@@ -164,3 +171,4 @@ export const PageMetadata = (props: PageMetadataProps) => {
{isPhy && showSidebarButton && !sidebarInTitle && below['md'](deviceSize) && }
;
};
+
diff --git a/src/app/state/reducers/userState.ts b/src/app/state/reducers/userState.ts
index 2c9c02a379..7f78780354 100644
--- a/src/app/state/reducers/userState.ts
+++ b/src/app/state/reducers/userState.ts
@@ -1,4 +1,4 @@
-import {Action, UserPreferencesDTO} from "../../../IsaacAppTypes";
+import {AccessibilitySettings, Action, UserPreferencesDTO} from "../../../IsaacAppTypes";
import {ACTION_TYPE} from "../../services";
import {UserAuthenticationSettingsDTO} from "../../../IsaacApiTypes";
import {userApi} from "../index";
@@ -41,11 +41,11 @@ export const totpChallengePending = (totpChallengePending: TotpChallengePendingS
}
};
-type AccessibilityTypeState = UserPreferencesDTO | null;
+type AccessibilityTypeState = AccessibilitySettings | null;
export const accessibilityType = (accessibilityType: AccessibilityTypeState = null, action: Action) => {
switch (action.type) {
case ACTION_TYPE.USER_PREFERENCES_RESPONSE_SUCCESS:
- return action.userPreferences;
+ return action.userPreferences.ACCESSIBILITY;
case ACTION_TYPE.ACCESSIBILITY_TYPE_SET:
return action.accessibilityType;
default:
From 24f806500259da8abbaec333f6eac3a6ed4db7a6 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Fri, 15 May 2026 16:09:53 +0100
Subject: [PATCH 11/23] Clean up components and imports between files
---
.../components/content/IsaacClozeQuestion.tsx | 14 ++----
.../content/IsaacDragAndDropQuestion.tsx | 30 ++-----------
src/app/components/elements/PageMetadata.tsx | 43 +++++++++++--------
src/app/state/selectors.tsx | 2 +-
4 files changed, 32 insertions(+), 57 deletions(-)
diff --git a/src/app/components/content/IsaacClozeQuestion.tsx b/src/app/components/content/IsaacClozeQuestion.tsx
index f42e6e129d..ea3fff2e6a 100644
--- a/src/app/components/content/IsaacClozeQuestion.tsx
+++ b/src/app/components/content/IsaacClozeQuestion.tsx
@@ -39,7 +39,7 @@ import {DragAndDropRegionContext, IsaacQuestionProps, ReplaceableItem} from "../
import {v4 as uuid_v4} from "uuid";
import {Immutable} from "immer";
import {arraySwap, SortableContext} from "@dnd-kit/sortable";
-import { DragAndDropInputModeToggle, useDefaultDragAndDropInputMode } from "./IsaacDragAndDropQuestion";
+import { selectors, useAppSelector } from "../../state";
const DropZoneItem = lazy(() => import("../elements/DnDItem"));
@@ -135,12 +135,8 @@ const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: Isa
const { currentAttempt: rawCurrentAttempt, dispatchSetCurrentAttempt } = useCurrentQuestionAttempt(questionId);
const currentAttempt = useMemo(() => rawCurrentAttempt ? {...rawCurrentAttempt, items: replaceNullItems(rawCurrentAttempt.items)} : undefined, [rawCurrentAttempt]);
- const defaultDragAndDropInputMode = useDefaultDragAndDropInputMode();
- const [dragAndDropEnabled, setDragAndDropEnabled] = useState(true);
- useEffect(() => {
- // Portals need a drop zone to attach to on first render, so we start with drag and drop enabled to ensure these are created, then disable here if needed
- setDragAndDropEnabled(defaultDragAndDropInputMode);
- }, [defaultDragAndDropInputMode]);
+ const accessibilityType = useAppSelector(selectors.accessibility.type);
+ const dragAndDropEnabled = !accessibilityType?.NON_DRAGGING_INPUTS;
const cssFriendlyQuestionPartId = questionId?.replace(/\|/g, '-') ?? ""; // Maybe we should clean up IDs more?
const withReplacement = doc.withReplacement ?? false;
@@ -492,7 +488,7 @@ const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: Isa
nonSelectedItems,
allItems,
zoneIds: new Set(),
- dragAndDropEnabled,
+ dragAndDropEnabled
}}>
- {/**/}
-
{doc.children}
diff --git a/src/app/components/content/IsaacDragAndDropQuestion.tsx b/src/app/components/content/IsaacDragAndDropQuestion.tsx
index 3360cc29fd..6ee3982848 100644
--- a/src/app/components/content/IsaacDragAndDropQuestion.tsx
+++ b/src/app/components/content/IsaacDragAndDropQuestion.tsx
@@ -42,10 +42,7 @@ import {DragAndDropRegionContext, IsaacQuestionProps, ReplaceableItem} from "../
import {v4 as uuid_v4} from "uuid";
import {Immutable} from "immer";
import {arraySwap, SortableContext} from "@dnd-kit/sortable";
-import StyledToggle from "../elements/inputs/StyledToggle";
import { useAccessibilitySettings } from "../../services/accessibility";
-import { Spacer } from "../elements/Spacer";
-import classNames from "classnames";
import { selectors, useAppSelector } from "../../state";
const DropZoneItem = lazy(() => import("../elements/DnDItem"));
@@ -145,23 +142,9 @@ export const useDefaultDragAndDropInputMode = () => {
const accessibilityType = useAppSelector(selectors.accessibility.type);
console.log("ac", accessibilityType);
-
return !(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)) || accessibilitySettings.NON_DRAGGING_INPUTS || false);
};
-export const DragAndDropInputModeToggle = ({dragAndDropEnabled, setDragAndDropEnabled, className}: {dragAndDropEnabled: boolean, setDragAndDropEnabled: (enabled: boolean) => void, className?: string}) => {
- return
- Question input mode
-
- setDragAndDropEnabled(!dragAndDropEnabled)}
- />
-
;
-};
-
const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse}: IsaacQuestionProps) => {
const { currentAttempt: rawCurrentAttempt, dispatchSetCurrentAttempt } = useCurrentQuestionAttempt(questionId);
const currentAttempt = useMemo(() => rawCurrentAttempt ? {...rawCurrentAttempt, items: replaceNullItems(rawCurrentAttempt.items)} : undefined, [rawCurrentAttempt]);
@@ -182,15 +165,8 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
.map(({replacementId: _, ...item}) => item);
};
- const defaultDragAndDropInputMode = useDefaultDragAndDropInputMode();
- const [dragAndDropEnabled, setDragAndDropEnabled] = useState(true);
- useEffect(() => {
- // Portals need a drop zone to attach to on first render, so we start with drag and drop enabled to ensure these are created, then disable here if needed
- setDragAndDropEnabled(defaultDragAndDropInputMode);
- }, [defaultDragAndDropInputMode]);
-
const accessibilityType = useAppSelector(selectors.accessibility.type);
- const dragAndDropEnabled2 = accessibilityType?.NON_DRAGGING_INPUTS === false;
+ const dragAndDropEnabled = !accessibilityType?.NON_DRAGGING_INPUTS;
const cssFriendlyQuestionPartId = questionId?.replace(/\|/g, '-') ?? ""; // Maybe we should clean up IDs more?
const withReplacement = doc.withReplacement ?? false;
@@ -548,7 +524,7 @@ const IsaacDragAndDropQuestion = ({doc, questionId, readonly, validationResponse
nonSelectedItems,
allItems,
zoneIds: new Set(),
- dragAndDropEnabled: dragAndDropEnabled2
+ dragAndDropEnabled
}}>
- {dragAndDropEnabled2 && <>
+ {dragAndDropEnabled && <>
{/* The item attached to the users cursor while dragging (just for display, shouldn't contain useDraggable/useSortable hooks) */}
{activeItem &&
diff --git a/src/app/components/elements/PageMetadata.tsx b/src/app/components/elements/PageMetadata.tsx
index 271186aba0..89b6fa5a5a 100644
--- a/src/app/components/elements/PageMetadata.tsx
+++ b/src/app/components/elements/PageMetadata.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode } from 'react';
import { ShareLink } from './ShareLink';
import { PrintButton } from './PrintButton';
import { ReportButton } from './ReportButton';
@@ -18,8 +18,8 @@ import { CrossTopicQuestionIndicator } from './CrossTopicQuestionIndicator';
import { selectors, useAppDispatch, useAppSelector } from '../../state';
import { BookmarkButton } from './BookmarkButton';
import { FeatureFlag, FeatureFlagWrapper } from '../../services/featureFlag';
-import { DragAndDropInputModeToggle, useDefaultDragAndDropInputMode } from '../content/IsaacDragAndDropQuestion';
import { Spacer } from './Spacer';
+import StyledToggle from "../elements/inputs/StyledToggle";
type PageMetadataProps = {
doc?: SeguePageDTO;
@@ -42,6 +42,19 @@ type PageMetadataProps = {
}
);
+export const DragAndDropInputModeToggle = ({dragAndDropEnabled, toggleDragAndDropEnabled}: {dragAndDropEnabled: boolean, toggleDragAndDropEnabled: () => void}) => {
+ return
+ Question input mode
+
+
+
;
+};
+
interface ActionButtonsProps extends React.HTMLAttributes {
location: Location;
isQuestion: boolean;
@@ -121,19 +134,12 @@ export const PageMetadata = (props: PageMetadataProps) => {
const dispatch = useAppDispatch();
const pageContainsClozeOrDragAndDropQuestion = useAppSelector(selectors.questions.includesClozeOrDragAndDropQuestion);
- const defaultDragAndDropInputMode = useDefaultDragAndDropInputMode();
- const [dragAndDropEnabled, setDragAndDropEnabled] = useState(true);
- useEffect(() => {
- // Portals need a drop zone to attach to on first render, so we start with drag and drop enabled to ensure these are created, then disable here if needed
- setDragAndDropEnabled(defaultDragAndDropInputMode);
- }, [defaultDragAndDropInputMode]);
const accessibilityType = useAppSelector(selectors.accessibility.type);
- const dragAndDropEnabled2 = accessibilityType?.NON_DRAGGING_INPUTS === true;
- const setDragAndDropEnabled2 = (enabled: boolean) => {
- dispatch({type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET, accessibilityType: {"NON_DRAGGING_INPUTS": enabled}});
- };
-
+ const dragAndDropEnabled = !accessibilityType?.NON_DRAGGING_INPUTS;
+ const toggleDragAndDropEnabled = () => {
+ dispatch({type: ACTION_TYPE.ACCESSIBILITY_TYPE_SET, accessibilityType: {"NON_DRAGGING_INPUTS": dragAndDropEnabled}});
+ };
return <>
{isPhy && showSidebarButton && sidebarInTitle && below['md'](deviceSize) && }
@@ -158,12 +164,11 @@ export const PageMetadata = (props: PageMetadataProps) => {
{isPhy && }
{isConcept && }
- {!pageContainsClozeOrDragAndDropQuestion && (
- <>
-
-
-
- )}
+ {pageContainsClozeOrDragAndDropQuestion && <>
+
+
+
+ }
{isPhy && }
diff --git a/src/app/state/selectors.tsx b/src/app/state/selectors.tsx
index 59b66feb52..53fe49070b 100644
--- a/src/app/state/selectors.tsx
+++ b/src/app/state/selectors.tsx
@@ -48,7 +48,7 @@ export const selectors = {
return !!state?.questions?.questions.some(q => q.type === "isaacLLMFreeTextQuestion");
},
includesClozeOrDragAndDropQuestion: (state: AppState) => {
- return !!state?.questions?.questions.some(q => q.type === "isaacClozeQuestion" || q.type === "isaacDragAndDropQuestion");
+ return !!state?.questions?.questions.some(q => q.type === "isaacClozeQuestion" || q.type === "isaacDndQuestion");
}
},
From 59a3be7d808371c2fb5ece711afad7790391daeb Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Fri, 15 May 2026 16:33:05 +0100
Subject: [PATCH 12/23] Add white background to non-empty cloze-dropdowns
---
src/scss/common/questions.scss | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/scss/common/questions.scss b/src/scss/common/questions.scss
index d77f598974..9151bc735e 100644
--- a/src/scss/common/questions.scss
+++ b/src/scss/common/questions.scss
@@ -529,6 +529,10 @@ figure .inline-container {
.cloze-dropdown > button {
min-width: 40px !important; // Bootstrap thinks its important
+ &.btn-secondary {
+ background-color: white;
+ }
+
&.empty.empty {
&, &:hover, &:active, &:focus { // Apply regardless of hover
border: grey solid 1px !important;
From e0e00264b128a018cd7bd583a32c439342bba187 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Fri, 15 May 2026 16:50:01 +0100
Subject: [PATCH 13/23] Add checkbox instead of toggle for Ada
---
src/app/components/elements/PageMetadata.tsx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/app/components/elements/PageMetadata.tsx b/src/app/components/elements/PageMetadata.tsx
index 89b6fa5a5a..2c6038bd8e 100644
--- a/src/app/components/elements/PageMetadata.tsx
+++ b/src/app/components/elements/PageMetadata.tsx
@@ -9,7 +9,7 @@ import { TeacherNotes } from './TeacherNotes';
import { useLocation } from 'react-router';
import { SidebarButton } from './SidebarButton';
import { HelpButton } from './HelpButton';
-import { above, ACTION_TYPE, below, isAda, isPhy, useDeviceSize } from '../../services';
+import { above, ACTION_TYPE, below, isAda, isPhy, siteSpecific, useDeviceSize } from '../../services';
import type { Location } from 'history';
import classNames from 'classnames';
import { UserContextPicker } from './inputs/UserContextPicker';
@@ -20,6 +20,7 @@ import { BookmarkButton } from './BookmarkButton';
import { FeatureFlag, FeatureFlagWrapper } from '../../services/featureFlag';
import { Spacer } from './Spacer';
import StyledToggle from "../elements/inputs/StyledToggle";
+import { StyledCheckbox } from './inputs/StyledCheckbox';
type PageMetadataProps = {
doc?: SeguePageDTO;
@@ -43,7 +44,7 @@ type PageMetadataProps = {
);
export const DragAndDropInputModeToggle = ({dragAndDropEnabled, toggleDragAndDropEnabled}: {dragAndDropEnabled: boolean, toggleDragAndDropEnabled: () => void}) => {
- return
+ return siteSpecific(
Question input mode
-
;
+