diff --git a/packages/editor/README.md b/packages/editor/README.md
index c0f7c9cf95..a76c5c683d 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -84,7 +84,13 @@ See below for the current API specification.
 - **Long-Term Support**: Unsure
 - **Needs Change?**: Unsure
 
-### `SerloEditor` component props
+#### 7. `type LearnerEventData`
+
+- **Why Exported/How Used**: This is how the `SerloRenderer` provides the details of a learners interaction to `handleLearnerEvent` (see below).
+- **Long-Term Support**: Unsure
+- **Needs Change?**: Unsure
+
+### `SerloEditor` component props (`SerloEditorProps`)
 
 - **`children`**: When passed in a function as the `children` prop, the `SerloEditor` component provides an `editor` render prop as the argument to the `children` function. This `editor` object provides:
 
@@ -107,6 +113,12 @@ See below for the current API specification.
 
 - **`_ltik` (optional)**: Required by the custom plugin `edusharingAsset` only used in `serlo-editor-for-edusharing`. **To be removed once a better solution is found or the plugin is removed.**
 
+### `SerloRenderer` component props (`SerloRendererProps`)
+
+- For `language`, `state`, `_ltik` and `editorVariant` please see props for `SerloEditor` above.
+
+- **`handleLearnerEvent` (optional)**: Function that receives details about the learners interaction in the form of `LearnerEventData`. Provide if you want to connect the editor to you LRS (Learning Record Store) or similar. [In our wiki you can find more details and a xAPI example](https://github.com/serlo/documentation/wiki/Learner-Events-and-xAPI).
+
 ### `pluginMenuEn` / `pluginMenuDe` constant and `Plugin` enum
 
 Exports two records with following structure which you can use to create your own plugin menu in either German or English. This is useful when you for example want to integrate the Serlo Editor as a block / part of another editor.
diff --git a/packages/editor/src/___dev-demo/preview.tsx b/packages/editor/src/___dev-demo/preview.tsx
index a29f50cacc..d4df7eed8d 100644
--- a/packages/editor/src/___dev-demo/preview.tsx
+++ b/packages/editor/src/___dev-demo/preview.tsx
@@ -1,5 +1,6 @@
 import { showToastNotice } from '@editor/editor-ui/show-toast-notice'
 import { EditorPluginType, SerloEditor, SerloRenderer } from '@editor/package'
+import { LearnerEventData } from '@editor/plugin/helpers/editor-learner-event'
 import { parseDocumentString } from '@editor/static-renderer/helper/parse-document-string'
 import { AnyEditorDocument } from '@editor/types/editor-plugins'
 import { useMemo, useState } from 'react'
@@ -90,6 +91,10 @@ export function Preview() {
           <SerloRenderer
             state={parseDocumentString(previewState)}
             editorVariant="unknown"
+            handleLearnerEvent={(data: LearnerEventData) => {
+              // eslint-disable-next-line no-console
+              console.log(data)
+            }}
           />
         </div>
       </section>
diff --git a/packages/editor/src/package/index.ts b/packages/editor/src/package/index.ts
index d762a36a62..e07daf3c00 100644
--- a/packages/editor/src/package/index.ts
+++ b/packages/editor/src/package/index.ts
@@ -3,6 +3,7 @@ export { SerloRenderer, type SerloRendererProps } from './serlo-renderer'
 
 export type { SupportedLanguage } from '@editor/types/language-data'
 export type { BaseEditor } from '@editor/core'
+export type { LearnerEventData } from '@editor/plugin/helpers/editor-learner-event'
 
 // We need to make a distinction between entires on our menu and technical
 // plugin types Internally we have for example a `scMcExercise` which has a
diff --git a/packages/editor/src/package/serlo-renderer.tsx b/packages/editor/src/package/serlo-renderer.tsx
index 0e92e9004e..4f356ab681 100644
--- a/packages/editor/src/package/serlo-renderer.tsx
+++ b/packages/editor/src/package/serlo-renderer.tsx
@@ -2,6 +2,10 @@ import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { createRenderers } from '@editor/editor-integration/create-renderers'
 import { EditStringsProvider } from '@editor/i18n/edit-strings-provider'
 import { StaticStringsProvider } from '@editor/i18n/static-strings-provider'
+import {
+  editorLearnerEvent,
+  LearnerEventData,
+} from '@editor/plugin/helpers/editor-learner-event'
 import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
 import { StaticRenderer } from '@editor/static-renderer/static-renderer'
 import type { SupportedLanguage } from '@editor/types/language-data'
@@ -16,6 +20,7 @@ export interface SerloRendererProps {
   state: unknown
   _ltik?: string
   editorVariant: EditorVariant
+  handleLearnerEvent?: (data: LearnerEventData) => void
 }
 
 export function SerloRenderer(props: SerloRendererProps) {
@@ -36,6 +41,10 @@ export function SerloRenderer(props: SerloRendererProps) {
   const basicRenderers = createRenderers()
   editorRenderers.init(basicRenderers)
 
+  if (props.handleLearnerEvent) {
+    editorLearnerEvent.init(props.handleLearnerEvent)
+  }
+
   return (
     <StaticStringsProvider value={staticStrings}>
       <EditStringsProvider value={editStrings}>
diff --git a/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx b/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx
index f6bc79d34c..40f3046e7c 100644
--- a/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx
+++ b/packages/editor/src/plugins/blanks-exercise/components/blank-check-button.tsx
@@ -18,7 +18,7 @@ export function BlankCheckButton(props: BlankCheckButtonProps) {
   const isCorrect = [...feedback].every((entry) => entry[1].isCorrect)
 
   return (
-    <div className="mt-2 flex">
+    <div className="mx-side mt-5 flex">
       <button
         className="serlo-button-learner-primary mr-3 h-8"
         onClick={onClick}
diff --git a/packages/editor/src/plugins/blanks-exercise/renderer.tsx b/packages/editor/src/plugins/blanks-exercise/renderer.tsx
index d0b2ece85d..df2bae6137 100644
--- a/packages/editor/src/plugins/blanks-exercise/renderer.tsx
+++ b/packages/editor/src/plugins/blanks-exercise/renderer.tsx
@@ -181,7 +181,7 @@ export function BlanksExerciseRenderer({
       <DndWrapper>
         <div
           className={cn(
-            'mx-side mb-block',
+            'mb-block',
             // Increase Slate line height in the editor
             '[&>div>div>div[data-slate-node="element"]]:leading-[30px]',
             // Increase Slate line height in the renderer
diff --git a/packages/editor/src/plugins/exercise/editor.tsx b/packages/editor/src/plugins/exercise/editor.tsx
index 8ff845c939..5a1b01f41f 100644
--- a/packages/editor/src/plugins/exercise/editor.tsx
+++ b/packages/editor/src/plugins/exercise/editor.tsx
@@ -76,72 +76,65 @@ export function ExerciseEditor(props: ExerciseProps) {
                 />
               </Suspense>
             ) : null}
+            <ExerciseToolbar
+              {...props}
+              previewActive={previewActive}
+              setPreviewActive={setPreviewActive}
+            />
+          </div>
+          <div className="h-10"></div>
+          <div className="mx-side">
+            {/* Special case for the blanks exercise: Until the child plugin is selected we hide the task to avoid confusion */}
+            {/* Background: Users often add their blanks-text to the task */}
             <div
               className={cn(
-                'group-focus-within/exercise:block',
-                isFocused ? 'block' : 'hidden'
+                'group-has-[.blanks-child-plugin-selection]/exercise:hidden',
+                '[&_.plugin-rows]:pl-[7px]'
               )}
             >
-              <ExerciseToolbar
-                {...props}
-                previewActive={previewActive}
-                setPreviewActive={setPreviewActive}
-              />
+              {content.render({
+                config: {
+                  textPluginPlaceholder: exStrings.placeholder,
+                },
+              })}
             </div>
-            <div className="h-10"></div>
-            <div className="mx-side">
-              {interactive.defined ? (
-                <>
-                  {/* Special case for the blanks exercise: Until the child plugin is selected we hide the task to avoid confusion */}
-                  {/* Background: Users often add their blanks-text to the task */}
-                  <div
-                    className={cn(
-                      'group-has-[.blanks-child-plugin-selection]/exercise:hidden',
-                      '[&_.plugin-rows]:pl-[7px]'
-                    )}
+            {interactive.defined ? (
+              <>
+                {interactive.render()}
+                {hideInteractiveInitially.defined ? (
+                  <small className="bg-editor-primary-200 p-1">
+                    [{exStrings.hideInteractiveInitially.info}]
+                  </small>
+                ) : null}
+              </>
+            ) : (
+              <InteractiveExercisesSelection interactive={interactive} />
+            )}
+            {solution.defined ? (
+              <div className="-ml-side mt-block">
+                <nav className="flex justify-end">
+                  <button
+                    className="serlo-button-round serlo-button-edit-secondary serlo-tooltip-trigger relative top-[31px] z-20 mr-side"
+                    onClick={() => solution.remove()}
                   >
-                    {content.render({
-                      config: {
-                        textPluginPlaceholder: exStrings.placeholder,
-                      },
-                    })}
-                  </div>
-                  {interactive.render()}
-                  {hideInteractiveInitially.defined ? (
-                    <small className="bg-editor-primary-200 p-1">
-                      [{exStrings.hideInteractiveInitially.info}]
-                    </small>
-                  ) : null}
-                </>
-              ) : (
-                <InteractiveExercisesSelection interactive={interactive} />
-              )}
-              {solution.defined ? (
-                <div className="-ml-side mt-block">
-                  <nav className="flex justify-end">
-                    <button
-                      className="serlo-button-round serlo-button-edit-secondary serlo-tooltip-trigger relative top-[31px] z-20 mr-side"
-                      onClick={() => solution.remove()}
-                    >
-                      <EditorTooltip text={exStrings.removeSolution} />
-                      <FaIcon icon={faTrashAlt} />
-                    </button>
-                  </nav>
-                  {solution.render()}
-                </div>
-              ) : (
-                <div
-                  className={cn(
-                    'mt-12 hidden max-w-[50%] group-focus-within/exercise:block',
-                    isFocused ? 'block' : 'hidden'
-                  )}
-                >
-                  <AddButton onClick={() => solution.create()}>
-                    {exStrings.createSolution}
-                  </AddButton>
-                </div>
-              )}
-            </div>
+                    <EditorTooltip text={exStrings.removeSolution} />
+                    <FaIcon icon={faTrashAlt} />
+                  </button>
+                </nav>
+                {solution.render()}
+              </div>
+            ) : (
+              <div
+                className={cn(
+                  'mt-12 hidden max-w-[50%] group-focus-within/exercise:block',
+                  isFocused ? 'block' : 'hidden'
+                )}
+              >
+                <AddButton onClick={() => solution.create()}>
+                  {exStrings.createSolution}
+                </AddButton>
+              </div>
+            )}
           </div>
         </div>
       </PreviewProvider>