diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
index 897ff07b01..1f9ff16e80 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
@@ -6,6 +6,7 @@ import {
Icon,
IconButton,
Form,
+ Spinner,
} from '@openedx/paragon';
import { FeedbackOutline, DeleteOutline } from '@openedx/paragon/icons';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -19,6 +20,7 @@ import * as hooks from './hooks';
import { ProblemTypeKeys } from '../../../../../data/constants/problem';
import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
import { answerRangeFormatRegex } from '../../../data/OLXParser';
+import { useValidateInputBlock } from '../../../data/apiHooks';
const AnswerOption = ({
answer,
@@ -32,7 +34,6 @@ const AnswerOption = ({
const isLibrary = useSelector(selectors.app.isLibrary);
const learningContextId = useSelector(selectors.app.learningContextId);
const blockId = useSelector(selectors.app.blockId);
-
const removeAnswer = hooks.removeAnswer({ answer, dispatch });
const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
const setAnswerTitle = hooks.setAnswerTitle({
@@ -44,6 +45,7 @@ const AnswerOption = ({
const setSelectedFeedback = hooks.setSelectedFeedback({ answer, hasSingleAnswer, dispatch });
const setUnselectedFeedback = hooks.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch });
const { isFeedbackVisible, toggleFeedback } = hooks.useFeedback(answer);
+ const { data = { is_valid: true }, mutate, isPending } = useValidateInputBlock();
const staticRootUrl = isLibrary
? `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`
@@ -71,15 +73,29 @@ const AnswerOption = ({
}
if (problemType !== ProblemTypeKeys.NUMERIC || !answer.isAnswerRange) {
return (
-
+
+ {
+ setAnswerTitle(e);
+ mutate(e.target.value);
+ }}
+ placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
+
+ />
+ {(!data?.is_valid ?? true) && (
+
+
+
+ )}
+ {isPending && (
+
+ )}
+
);
}
// Return Answer Range View
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js
index d69bc876d7..c0dcec2528 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js
@@ -82,6 +82,11 @@ const messages = defineMessages({
defaultMessage: 'Error: Invalid range format. Use brackets or parentheses with values separated by a comma.',
description: 'Error text describing wrong format of answer ranges',
},
+ answerNumericErrorText: {
+ id: 'authoring.answerwidget.answer.answerNumericErrorText',
+ defaultMessage: 'Error: This input type only supports numeric answers. Did you mean to make a Text input or Math expression input problem?',
+ description: 'Error message when user provides wrong format',
+ },
});
export default messages;
diff --git a/src/editors/containers/ProblemEditor/data/apiHooks.ts b/src/editors/containers/ProblemEditor/data/apiHooks.ts
new file mode 100644
index 0000000000..9e91f76440
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/apiHooks.ts
@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { getConfig } from '@edx/frontend-platform';
+import api from '@src/editors/data/services/cms/api';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const useValidateInputBlock = () => useMutation({
+ mutationFn: async (title) => {
+ try {
+ const res = await api.validateBlockNumericInput({ studioEndpointUrl: `${getApiBaseUrl()}`, data: { formula: title } });
+ return res.data;
+ } catch (err: any) {
+ return {
+ is_valid: false,
+ error: err.response?.data?.error ?? 'Unknown error',
+ };
+ }
+ },
+});
diff --git a/src/editors/data/images/numericalInput.png b/src/editors/data/images/numericalInput.png
index 535631d3b6..b4a285a5f9 100644
Binary files a/src/editors/data/images/numericalInput.png and b/src/editors/data/images/numericalInput.png differ
diff --git a/src/editors/data/services/cms/api.ts b/src/editors/data/services/cms/api.ts
index ec4cd7d760..aceb01c763 100644
--- a/src/editors/data/services/cms/api.ts
+++ b/src/editors/data/services/cms/api.ts
@@ -390,6 +390,13 @@ export const apiMethods = {
}) => get(
urls.handlerUrl({ studioEndpointUrl, blockId, handlerName }),
),
+ validateBlockNumericInput: ({
+ studioEndpointUrl,
+ data,
+ }) => post(
+ urls.validateNumericInputUrl({ studioEndpointUrl }),
+ data,
+ ),
};
export default apiMethods;
diff --git a/src/editors/data/services/cms/urls.ts b/src/editors/data/services/cms/urls.ts
index 6da1e22038..28398055fa 100644
--- a/src/editors/data/services/cms/urls.ts
+++ b/src/editors/data/services/cms/urls.ts
@@ -123,3 +123,7 @@ export const courseVideos = (({ studioEndpointUrl, learningContextId }) => (
export const handlerUrl = (({ studioEndpointUrl, blockId, handlerName }) => (
`${studioEndpointUrl}/api/xblock/v2/xblocks/${blockId}/handler_url/${handlerName}/`
)) satisfies UrlFunction;
+
+export const validateNumericInputUrl = (({ studioEndpointUrl }) => (
+ `${studioEndpointUrl}/api/contentstore/v2/validate/numerical-input/`
+)) satisfies UrlFunction;