diff --git a/packages/backendv2/src/models/quiz_item.ts b/packages/backendv2/src/models/quiz_item.ts index 74092b1f..81b14a33 100644 --- a/packages/backendv2/src/models/quiz_item.ts +++ b/packages/backendv2/src/models/quiz_item.ts @@ -39,6 +39,7 @@ class QuizItem extends mixin(BaseModel, [ allAnswersCorrect!: string deleted!: boolean direction!: "row" | "column" + prefaceText!: string static get tableName() { return "quiz_item" diff --git a/packages/backendv2/tests/data.ts b/packages/backendv2/tests/data.ts index 6559da76..600f8dc6 100644 --- a/packages/backendv2/tests/data.ts +++ b/packages/backendv2/tests/data.ts @@ -30,6 +30,7 @@ export const input = { failureMessage: "boo!", sharedOptionFeedbackMessage: null, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", options: [ { order: 1, @@ -51,6 +52,7 @@ export const input = { allAnswersCorrect: false, sharedOptionFeedbackMessage: null, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", }, ], peerReviewCollections: [ @@ -102,6 +104,7 @@ export const input = { failureMessage: "boo!", sharedOptionFeedbackMessage: null, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", }, { id: "707195a3-aafe-4c06-bf23-854e54e084db", @@ -116,6 +119,7 @@ export const input = { failureMessage: "boo!", sharedOptionFeedbackMessage: null, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", }, ], peerReviewCollections: [ @@ -283,6 +287,7 @@ export const validation = { usesSharedOptionFeedbackMessage: false, title: "multiple-choice", feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", body: "item", successMessage: "yay!", failureMessage: "boo!", @@ -320,6 +325,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "essay", body: "item", successMessage: "yay!", @@ -396,6 +402,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "essay", body: "item", successMessage: "yay!", @@ -421,6 +428,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "open", body: "item", successMessage: "yay!", @@ -496,6 +504,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "multiple-choice", body: "item", successMessage: "yay!", @@ -534,6 +543,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "essay", body: "item", successMessage: "yay!", @@ -610,6 +620,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", options: [], title: "open", body: "item", @@ -635,6 +646,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "open", body: "item", successMessage: "yay!", @@ -684,6 +696,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "essay", body: "item", successMessage: "yay!", @@ -709,6 +722,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "open", body: "item", successMessage: "yay!", @@ -758,6 +772,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "essay", body: "item", successMessage: "yay!", @@ -783,6 +798,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", title: "open", body: "item", successMessage: "yay!", @@ -1292,6 +1308,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", createdAt: expect.stringMatching(dateTime), updatedAt: expect.stringMatching(dateTime), options: [], @@ -1317,6 +1334,7 @@ export const validation = { maxValue: null, usesSharedOptionFeedbackMessage: false, feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceText: "prefaceText", createdAt: expect.stringMatching(dateTime), updatedAt: expect.stringMatching(dateTime), allAnswersCorrect: false, diff --git a/packages/moocfi-quizzes/src/components/MultipleChoice.tsx b/packages/moocfi-quizzes/src/components/MultipleChoice.tsx index 74c983c0..fd47b6fc 100644 --- a/packages/moocfi-quizzes/src/components/MultipleChoice.tsx +++ b/packages/moocfi-quizzes/src/components/MultipleChoice.tsx @@ -96,6 +96,11 @@ const LeftAlignedMarkdownText = styled(MarkdownText)` const justADiv = styled.div`` +const PrefaceMarkdown = styled(MarkdownText)` + padding-top: 1em; + padding-bottom: 1em; +` + type MultipleChoiceProps = { item: QuizItem } @@ -108,11 +113,10 @@ const MultipleChoice: React.FunctionComponent = ({ const quizDisabled = useTypedSelector(state => state.quizAnswer.quizDisabled) const answer = useTypedSelector(state => state.quizAnswer.quizAnswer) const options = item.options - + // preface_text if (!quiz) { return
} - const itemAnswer = answer.itemAnswers.find(ia => ia.quizItemId === item.id) if (!itemAnswer && !quizDisabled) { return @@ -130,6 +134,11 @@ const MultipleChoice: React.FunctionComponent = ({ return (
+ {item.prefaceText.length > 1 ? ( + + {item.prefaceText} + + ) : null} = ({ }) if (fatal) { - console.log("quiz") courseStatusProvider.notifyError && courseStatusProvider.notifyError(messageState.message) return ( diff --git a/packages/moocfi-quizzes/src/modelTypes.ts b/packages/moocfi-quizzes/src/modelTypes.ts index a9c6d12d..1dbb8608 100644 --- a/packages/moocfi-quizzes/src/modelTypes.ts +++ b/packages/moocfi-quizzes/src/modelTypes.ts @@ -127,6 +127,7 @@ export type QuizItem = { sharedOptionFeedbackMessage?: string direction: QuizItemDirection feedbackDisplayPolicy: QuizItemFeedbackDisplayPolicy + prefaceText: string } export type PeerReviewQuestion = { diff --git a/packages/quizzes-dashboard/components/QuizEditForms/QuizItem/MultipleChoiceDropdownContent/MultipleChoiceDropdownModalContent.tsx b/packages/quizzes-dashboard/components/QuizEditForms/QuizItem/MultipleChoiceDropdownContent/MultipleChoiceDropdownModalContent.tsx index e55ce0b0..6d06cdd2 100644 --- a/packages/quizzes-dashboard/components/QuizEditForms/QuizItem/MultipleChoiceDropdownContent/MultipleChoiceDropdownModalContent.tsx +++ b/packages/quizzes-dashboard/components/QuizEditForms/QuizItem/MultipleChoiceDropdownContent/MultipleChoiceDropdownModalContent.tsx @@ -15,6 +15,7 @@ import { editedSharedOptionsFeedbackMessage, editedItemSuccessMessage, editedItemFailureMessage, + editedQuizItemPrefaceTitle, } from "../../../../store/editor/items/itemAction" import { useTypedSelector } from "../../../../store/store" import { useDispatch } from "react-redux" @@ -159,6 +160,17 @@ export const MultipleChoiceModalContent = ({ item }: EditorModalProps) => { )} + + + dispatch( + editedQuizItemPrefaceTitle(event.target.value, storeItem.id), + ) + } + /> + ) } diff --git a/packages/quizzes-dashboard/store/editor/items/itemAction.ts b/packages/quizzes-dashboard/store/editor/items/itemAction.ts index c5451a98..51ebab71 100644 --- a/packages/quizzes-dashboard/store/editor/items/itemAction.ts +++ b/packages/quizzes-dashboard/store/editor/items/itemAction.ts @@ -146,6 +146,11 @@ export const editedQuizItemFeedbackDisplayPolicy = createAction( newPolicy: "DisplayFeedbackOnQuizItem" | "DisplayFeedbackOnAllOptions" }>() +export const editedQuizItemPrefaceTitle = createAction( + "EDITED_QUIZ_ITEM_PREFACE_TITLE", + (itemId: string, newPrefaceTitle: string) => ({ itemId, newPrefaceTitle }), +)<{ itemId: string; newPrefaceTitle: string }>() + export const itemActions = [ editedQuizItemBody, editedQuizItemTitle, @@ -167,6 +172,7 @@ export const itemActions = [ toggledAllAnswersCorrect, editedItemDirection, editedQuizItemFeedbackDisplayPolicy, + editedQuizItemPrefaceTitle, ] export default itemActions diff --git a/packages/quizzes-dashboard/store/editor/items/itemReducer.ts b/packages/quizzes-dashboard/store/editor/items/itemReducer.ts index 1d167a02..77cfb32b 100644 --- a/packages/quizzes-dashboard/store/editor/items/itemReducer.ts +++ b/packages/quizzes-dashboard/store/editor/items/itemReducer.ts @@ -19,6 +19,7 @@ import { toggledAllAnswersCorrect, editedItemDirection, editedQuizItemFeedbackDisplayPolicy, + editedQuizItemPrefaceTitle, } from "./itemAction" import { initializedEditor, @@ -132,6 +133,13 @@ export const itemReducer = createReducer< }) }) + .handleAction(editedQuizItemPrefaceTitle, (state, action) => { + return produce(state, draftState => { + draftState[action.payload.itemId].prefaceTitle = + action.payload.newPrefaceTitle + }) + }) + .handleAction(createdNewItem, (state, action) => { return produce(state, draftState => { const newItem: NormalizedItem = { @@ -158,6 +166,7 @@ export const itemReducer = createReducer< allAnswersCorrect: false, direction: "row", feedbackDisplayPolicy: "DisplayFeedbackOnQuizItem", + prefaceTitle: null, } draftState[action.payload.itemId] = newItem }) diff --git a/packages/quizzes-dashboard/types/NormalizedQuiz.d.ts b/packages/quizzes-dashboard/types/NormalizedQuiz.d.ts index c647f97c..3ae256e5 100644 --- a/packages/quizzes-dashboard/types/NormalizedQuiz.d.ts +++ b/packages/quizzes-dashboard/types/NormalizedQuiz.d.ts @@ -67,6 +67,7 @@ export interface NormalizedItem { feedbackDisplayPolicy: | "DisplayFeedbackOnQuizItem" | "DisplayFeedbackOnAllOptions" + prefaceTitle: string | null } export interface NormalizedOption { diff --git a/packages/quizzes-dashboard/types/Quiz.d.ts b/packages/quizzes-dashboard/types/Quiz.d.ts index 06dd2eda..dd660d24 100644 --- a/packages/quizzes-dashboard/types/Quiz.d.ts +++ b/packages/quizzes-dashboard/types/Quiz.d.ts @@ -50,6 +50,7 @@ export interface Item { feedbackDisplayPolicy: | "DisplayFeedbackOnQuizItem" | "DisplayFeedbackOnAllOptions" + prefaceTitle: null } export interface Option {