Using the Slide Editor

The AI Tutor Slide Editor lets you build interactive lesson slides by combining a visual canvas with structured question data. This article covers the full editor layout, every toolbar control, the region builder, the questions panel, and keyboard shortcuts.

Editor Layout

The editor is split into two main areas:

• Left side — Slide Preview with Fabric Overlay Canvas. This shows the current slide image with a transparent Fabric.js canvas layered on top. You draw shapes, text labels, and annotations directly on the canvas. The region builder sits below the slide preview and is used to define spotlight, scratchpad, pointer, and interactive regions.
• Right side — Questions Panel. This lists all questions for the current slide. Each question is a collapsible card containing fields for question text, correct keywords, hints, response messages, question type, and region coordinates. You edit question data here and reorder questions by dragging.

Toolbar

The toolbar runs across the top of the slide preview area. From left to right:

Fabric Overlay Tools

The Fabric overlay toolbar provides drawing and annotation tools for the canvas layer that sits on top of the slide image. These tools create visual elements that appear during lesson playback.

Shape and Drawing Tools

Each tool has a keyboard shortcut (the letter in parentheses):

Color and Style Controls

• Fill Color Picker — Sets the interior fill color for shapes (rectangles, circles, ellipses, triangles). Click the color swatch to open a color picker dialog.
• Stroke Color Picker — Sets the border/outline color for shapes and the color for lines, arrows, and freehand strokes.
• Stroke Width Selector — Controls the thickness of borders and lines. Choose from preset widths.
• Font Size Selector — Sets the font size for the Text tool, ranging from 10px to 36px.

Text Formatting

• Superscript Button — Applies superscript formatting to selected text (useful for exponents like x²).
• Subscript Button — Applies subscript formatting to selected text (useful for chemical formulas or indexed variables).

Edit Actions

• Undo (Ctrl+Z) — Reverses the last action on the canvas.
• Redo (Ctrl+Y) — Re-applies an undone action.
• Duplicate — Creates a copy of the currently selected object, offset slightly from the original.
• Center — Centers the selected object on the canvas both horizontally and vertically.
• Delete — Removes the selected object from the canvas. You can also press Del or Backspace.

Lock Toggle

The lock toggle controls what happens when you click and drag on the canvas:

• Locked (lock icon closed) — You can select and edit individual drawing objects (shapes, text, lines). Clicking on an object selects it for moving, resizing, or editing.
• Unlocked (lock icon open) — You can move the entire scratchpad region and drawing layer together. This is useful for repositioning the overlay as a whole without accidentally modifying individual objects.

Zoom Controls

• Zoom In (+) — Increases the canvas zoom level for detailed work.
• Zoom Out (−) — Decreases the canvas zoom level to see more of the slide.
• Zoom Level Display — Shows the current zoom percentage.
• Reset Button — Returns the zoom level to 100% (fit to container).

Region Builder

The Region Builder sits below the slide preview. It is used to define rectangular regions on the slide that control what the student sees and interacts with during lesson playback.

Layer Toggles

Each layer type has an eye icon for toggling visibility on the slide preview:

Visibility Controls

• Show All — Makes all layers visible at once so you can see how they overlap.
• Hide All — Hides all layers to see the clean slide image underneath.

Mode Actions

Each layer type has its own set of mode actions:

• Append Toggle — When enabled, clicking and dragging on the slide adds a new region to the active layer instead of replacing existing ones. This lets you define multiple regions for the same layer type (for example, multiple interactive input regions for a multi-part question).
• Undo — Removes the last region added to the active layer.
• Delete All — Clears all regions for the active layer type. Use with caution.

Drawing Regions

To draw a region:

1. Select the layer type you want to draw (Spotlight, Teacher Pad, Regions, or Pointer).
2. Click and drag on the slide preview to define the rectangular region.
3. As you draw, the coordinate readout displays the x, y, width, and height values as percentages of the slide dimensions.
4. Release the mouse button to finalize the region.

You can adjust a region after drawing by clicking on it and dragging its edges or corners. The coordinate readout updates in real time as you resize.

Questions Panel

The Questions Panel on the right side of the editor manages all questions associated with the current slide.

Question Cards

Each question appears as a collapsible card showing:

• Question Type — The interaction type (e.g., voice, write_regions, draggable_labels, choice, buckets, region_drawing, __text_only__).
• Text Preview — A truncated preview of the question text for quick identification.
• Expand/Collapse — Click the card header to expand it and reveal all editable fields, or collapse it to save space.

When expanded, each card contains fields for:

• Question text (what Ms. Irina says / the TTS reads aloud)
• Correct keywords (for keyword matching or AI evaluation)
• Hint text (shown if the student struggles)
• Correct response message (shown on correct answer)
• Wrong response message (shown on incorrect answer)
• Question type selector
• Region coordinate fields (spotlight, scratchpad, overlay text, drawing regions)
• Brush size, font settings, and other type-specific options

Reordering Questions

Drag question cards up or down to change the order in which they appear during lesson playback. The first card (order 1) plays first. Typically, the first question is a __text_only__ introduction that auto-advances, followed by graded interactive questions.

Adding and Removing Questions

• Add Question Button — Creates a new blank question card at the end of the list. Fill in the required fields (question text, type, hint, correct/wrong responses) before saving.
• To remove a question, expand its card and use the delete option.

Saving Changes

Click the Save button or press Ctrl+S to save all question changes for the current slide. The editor validates that required fields (hint, correct response, wrong response) are filled for graded questions before saving.

Multi-Select (Rubber Band)

You can select multiple regions, pointer dots, or overlay items at once using rubber-band selection:

• Regions: Hold Shift and drag on the slide canvas to draw a selection rectangle. All regions inside it will be selected (highlighted in blue). You can then move or align them together using the alignment toolbar that appears.
• Pointer dots: Hold Shift (or Cmd/Ctrl) and drag to select multiple pointer positions. Selected dots can be moved as a group or deleted together.
• Overlay items: In the Fabric overlay editor, use Shift+Click to add items to the selection, or drag a selection box around multiple text/shape items.

To deselect, click on an empty area of the canvas or press Escape.

Keyboard Shortcuts

Typical Workflow

1. Navigate to the slide you want to edit using the Previous/Next arrows.
2. If the slide content needs changes, click the Edit button to open ONLYOFFICE and modify the PPTX source.
3. Use the Region Builder to define the Spotlight (visible problem area) and Teacher Pad (scratchpad zone).
4. In the Questions Panel, add questions in order. Start with a __text_only__ introduction, then add graded questions.
5. For each question, set the question type, write the question text, fill in correct keywords, hint, and response messages.
6. Use the Fabric overlay tools to draw annotations, labels, or visual guides on the canvas.
7. Press Ctrl+S to save.
8. Use the Enable/Disable toggle to skip solution slides or other slides that should not play.