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;