Fill in the blanks: Final preparation for release

apps/web/src/data/en/index.ts

@@ -904,9 +904,10 @@ export const loggedInData = {
           title: 'SC/MC Exercise',
           description: 'Single Choice or Multiple Choice'
         },
-        fillInTheBlanks: {
+        blanksExercise: {
           title: 'Fill In The Blanks Exercise',
-          description: 'Text with blanks'
+          description: 'Text with blanks',
+          placeholder: 'Write a text and add blanks'
         }
       },
       templatePlugins: {
@@ -967,8 +968,8 @@ export const loggedInData = {
         exercise: {
           scMcExercise: 'Choice Exercise',
           inputExercise: 'Input Exercise',
+          blanksExercise: 'Fill In The Blanks Exercise',
           h5p: 'H5p Exercise',
-          fillInTheBlanksExercise: 'Fill In The Blanks',
           addOptionalInteractiveEx: 'Add an optional interactive exercise:',
           changeInteractive: 'Change interactive element',
           removeInteractive: 'Remove interactive element',
@@ -1183,7 +1184,8 @@ export const loggedInData = {
           chooseOption: "Choose an option",
           multipleChoice: "Multiple Choice",
           singleChoice: "Single Choice",
-          inputExercise: "Input exercise"
+          inputExercise: "Input exercise",
+          blanksExercise: "Fill In The Blanks Exercise"
         },
         difficulty: {
           title: 'What is the %difficulty% level of the exercise and learning goal?',

apps/web/src/serlo-editor-integration/create-plugins.tsx

@@ -189,14 +189,10 @@ export function createPlugins({
       }),
     },
     { type: EditorPluginType.ScMcExercise, plugin: createScMcExercisePlugin() },
-    ...(isProduction
-      ? []
-      : [
-          {
-            type: EditorPluginType.FillInTheBlanksExercise,
-            plugin: fillInTheBlanksExercise,
-          },
-        ]),
+    {
+      type: EditorPluginType.FillInTheBlanksExercise,
+      plugin: fillInTheBlanksExercise,
+    },
 
     // Special plugins, never visible in suggestions
     // ===================================================

apps/web/src/serlo-editor-integration/create-renderers.tsx

@@ -28,7 +28,6 @@ import { TemplatePluginType } from '../serlo-editor/types/template-plugin-type'
 import { Lazy } from '@/components/content/lazy'
 import { Link } from '@/components/content/link'
 import { isPrintMode } from '@/components/print-mode'
-import { isProduction } from '@/helper/is-production'
 import {
   InitRenderersArgs,
   LinkRenderer,
@@ -216,14 +215,10 @@ export function createRenderers(): InitRenderersArgs {
         type: EditorPluginType.ScMcExercise,
         renderer: SerloScMcExerciseStaticRenderer,
       },
-      ...(isProduction
-        ? []
-        : [
-            {
-              type: EditorPluginType.FillInTheBlanksExercise,
-              renderer: FillInTheBlanksStaticRenderer,
-            },
-          ]),
+      {
+        type: EditorPluginType.FillInTheBlanksExercise,
+        renderer: FillInTheBlanksStaticRenderer,
+      },
       {
         type: EditorPluginType.Solution,
         renderer: SolutionSerloStaticRenderer,

apps/web/src/serlo-editor/editor-ui/plugin-toolbar/text-controls/utils/blank.ts

@@ -35,7 +35,10 @@ export function toggleBlank(editor: SlateEditor) {
       },
     })
     if (text) {
-      Transforms.insertNodes(editor, { text: (text as Blank).correctAnswer })
+      const blank = text as Blank
+      Transforms.insertNodes(editor, {
+        text: blank.correctAnswers[0]?.answer ?? '',
+      })
     }
     return
   }
@@ -47,9 +50,7 @@ export function toggleBlank(editor: SlateEditor) {
     Transforms.insertNodes(editor, {
       type: 'blank',
       blankId: uuid_v4(),
-      correctAnswer: '',
-      // Disabled alternative correct solutions for now
-      // alternativeSolutions: [],
+      correctAnswers: [{ answer: '' }],
       children: [{ text: '' }],
     })
     return
@@ -62,10 +63,14 @@ export function toggleBlank(editor: SlateEditor) {
       {
         type: 'blank',
         blankId: uuid_v4(),
-        correctAnswer:
-          SlateEditor.string(editor, trimmedSelection as Location) || '',
-        // Disabled alternative correct solutions for now
-        // alternativeSolutions: [],
+        correctAnswers: [
+          {
+            answer: SlateEditor.string(
+              editor,
+              trimmedSelection as Location
+            ).trim(),
+          },
+        ],
         children: [{ text: '' }],
       },
     ],

apps/web/src/serlo-editor/plugins/exercise/editor.tsx

@@ -5,24 +5,17 @@ import { ExerciseToolbar } from './toolbar/toolbar'
 import { FaIcon } from '@/components/fa-icon'
 import { useEditorStrings } from '@/contexts/logged-in-data-context'
 import { cn } from '@/helper/cn'
-import { isProduction } from '@/helper/is-production'
 import { AddButton } from '@/serlo-editor/editor-ui'
 import { EditorTooltip } from '@/serlo-editor/editor-ui/editor-tooltip'
 import { editorPlugins } from '@/serlo-editor/plugin/helpers/editor-plugins'
 import { EditorPluginType } from '@/serlo-editor/types/editor-plugin-type'
 
-const allInteractiveExerciseTypes = isProduction
-  ? ([
-      EditorPluginType.ScMcExercise,
-      EditorPluginType.InputExercise,
-      EditorPluginType.H5p,
-    ] as const)
-  : ([
-      EditorPluginType.ScMcExercise,
-      EditorPluginType.InputExercise,
-      EditorPluginType.H5p,
-      EditorPluginType.FillInTheBlanksExercise,
-    ] as const)
+const allInteractiveExerciseTypes = [
+  EditorPluginType.ScMcExercise,
+  EditorPluginType.InputExercise,
+  EditorPluginType.H5p,
+  EditorPluginType.FillInTheBlanksExercise,
+] as const
 
 export type InteractiveExerciseType =
   (typeof allInteractiveExerciseTypes)[number]

apps/web/src/serlo-editor/plugins/fill-in-the-blanks-exercise/blank-renderer.tsx

@@ -1,24 +1,17 @@
-// import { useDroppable } from '@dnd-kit/core'
-import { ChangeEventHandler, useContext } from 'react'
+import { ChangeEventHandler, ReactNode, useContext } from 'react'
+import { useDrop } from 'react-dnd'
 
-// import { BlankSolution } from './components/blank-solution'
-// import { BlankDragAndDropSolutions } from './renderer'
-import type { FillInTheBlanksMode } from '.'
+import type { BlankId, DraggableId, FillInTheBlanksMode } from '.'
+import { DraggableSolution } from './components/blank-solution'
 import { FillInTheBlanksContext } from './context/blank-context'
 import { cn } from '@/helper/cn'
 
 /** Renders either an input element (where user can type into) or a drop area (where user can drop draggable answers) depending on the mode  */
 export function BlankRenderer(props: {
-  correctAnswer: string
   blankId: string
   onChange?: ChangeEventHandler<HTMLInputElement>
   forceMode?: FillInTheBlanksMode
 }) {
-  // const dragAndDropSolutions = useContext(BlankDragAndDropSolutions)
-  // const draggableElementInBlank = dragAndDropSolutions?.find(
-  //   (entry) => entry.inDroppableId === props.blankId
-  // )
-
   const fillInTheBlanksContext = useContext(FillInTheBlanksContext)
   if (fillInTheBlanksContext === null) {
     // blankStates was not provided by FillInTheBlanksRenderer -> cannot continue
@@ -32,6 +25,18 @@ export function BlankRenderer(props: {
   const textInBlank =
     fillInTheBlanksContext.textInBlanks.get(props.blankId)?.text ?? ''
 
+  const draggableSolutionInBlank = [
+    ...fillInTheBlanksContext.locationOfDraggables.value,
+  ].find((entry) => entry[1] === props.blankId)
+
+  const draggableIdInThisBlank = draggableSolutionInBlank
+    ? draggableSolutionInBlank[0]
+    : null
+
+  const draggableText = fillInTheBlanksContext.draggables.find(
+    (draggable) => draggable.draggableId === draggableIdInThisBlank
+  )?.text
+
   return (
     <>
       {mode === 'typing' ? (
@@ -56,14 +61,17 @@ export function BlankRenderer(props: {
         />
       ) : (
         <>
-          {/* {draggableElementInBlank ? (
-            <BlankSolution
-              text={draggableElementInBlank.text}
-              draggableId={draggableElementInBlank.draggableId}
-            />
-          ) : (
-            <EmptyBlankWithDropZone id={props.blankId} />
-          )} */}
+          <DroppableBlank
+            blankId={props.blankId}
+            disable={draggableIdInThisBlank !== null}
+          >
+            {draggableIdInThisBlank ? (
+              <DraggableSolution
+                text={draggableText ?? ''}
+                draggableId={draggableIdInThisBlank}
+              />
+            ) : null}
+          </DroppableBlank>
         </>
       )}
     </>
@@ -85,18 +93,40 @@ export function BlankRenderer(props: {
   }
 }
 
-// function EmptyBlankWithDropZone(props: { id: string }) {
-//   const { setNodeRef, isOver } = useDroppable({
-//     id: props.id,
-//   })
+function DroppableBlank(props: {
+  blankId: BlankId
+  disable: boolean
+  children: ReactNode
+}) {
+  const fillInTheBlanksContext = useContext(FillInTheBlanksContext)
+  const [{ isOver }, dropRef] = useDrop({
+    accept: 'blank-solution',
+    drop: (item) => {
+      if (!fillInTheBlanksContext) return
+      const newMap = new Map<DraggableId, BlankId>(
+        fillInTheBlanksContext.locationOfDraggables.value
+      )
+      newMap.set(
+        (item as { draggableId: DraggableId }).draggableId,
+        props.blankId
+      )
+      fillInTheBlanksContext.locationOfDraggables.set(newMap)
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+    }),
+    canDrop: () => !props.disable,
+  })
 
-//   return (
-//     <span
-//       className={cn(
-//         'rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2',
-//         isOver && 'bg-slate-400'
-//       )}
-//       ref={setNodeRef}
-//     ></span>
-//   )
-// }
+  return (
+    <span
+      className={cn(
+        'rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2',
+        isOver && !props.disable && 'bg-slate-400'
+      )}
+      ref={dropRef}
+    >
+      {props.children}
+    </span>
+  )
+}

apps/web/src/serlo-editor/plugins/fill-in-the-blanks-exercise/components/blank-solution-area.tsx

@@ -1,17 +1,38 @@
-// import { useDroppable } from '@dnd-kit/core'
-// import { ReactNode } from 'react'
+import { ReactNode } from 'react'
+import { useDrop } from 'react-dnd'
 
-// export function BlankSolutionsArea(props: { children: ReactNode }) {
-//   const { setNodeRef } = useDroppable({
-//     id: 'blank-solutions-area',
-//   })
+import type { BlankId, DraggableId } from '..'
+import { cn } from '@/helper/cn'
 
-//   return (
-//     <div
-//       className="mt-5 min-h-8 w-full rounded-full bg-slate-100"
-//       ref={setNodeRef}
-//     >
-//       {props.children}
-//     </div>
-//   )
-// }
+export function DraggableSolutionArea(props: {
+  children: ReactNode
+  locationOfDraggables: {
+    value: Map<DraggableId, BlankId>
+    set: React.Dispatch<React.SetStateAction<Map<DraggableId, BlankId>>>
+  }
+}) {
+  const [{ isOver }, dropRef] = useDrop({
+    accept: 'blank-solution',
+    drop: (item: { draggableId: DraggableId }) => {
+      const newMap = new Map<DraggableId, BlankId>(
+        props.locationOfDraggables.value
+      )
+      newMap.delete(item.draggableId)
+      props.locationOfDraggables.set(newMap)
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+    }),
+  })
+  return (
+    <div
+      className={cn(
+        'mt-5 min-h-8 w-full rounded-full bg-slate-100',
+        isOver ? 'bg-slate-200' : ''
+      )}
+      ref={dropRef}
+    >
+      {props.children}
+    </div>
+  )
+}

apps/web/src/serlo-editor/plugins/fill-in-the-blanks-exercise/components/blank-solution.tsx

@@ -1,27 +1,22 @@
-// import { UniqueIdentifier, useDraggable } from '@dnd-kit/core'
+import { useDrag } from 'react-dnd'
 
-// export function BlankSolution(props: {
-//   text: string
-//   draggableId: UniqueIdentifier
-// }) {
-//   const { attributes, listeners, setNodeRef, transform } = useDraggable({
-//     id: props.draggableId,
-//   })
-//   const style = transform
-//     ? {
-//         transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-//       }
-//     : undefined
+import type { DraggableId } from '..'
 
-//   return (
-//     <div
-//       ref={setNodeRef}
-//       style={style}
-//       {...listeners}
-//       {...attributes}
-//       className="inline-block h-full rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2"
-//     >
-//       {props.text}
-//     </div>
-//   )
-// }
+export function DraggableSolution(props: {
+  text: string
+  draggableId: DraggableId
+}) {
+  const [, dragRef] = useDrag({
+    type: 'blank-solution',
+    item: { draggableId: props.draggableId },
+  })
+
+  return (
+    <div
+      className="inline-block h-full rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2"
+      ref={dragRef}
+    >
+      {props.text}
+    </div>
+  )
+}