Met de Drag and Drop vraag kan je elementen, zoals tekst of afbeeldingen, naar de juiste plek slepen op het canvas (antwoordgebied). Om deze vraag te gebruiken ga je in de linker navigatie naar 'Question Module' en selecteer je 'Drag and Drop'

Vraagopties

De vraag wordt nu in je canvas gezet en je ziet een aantal vraagopties verschijnen:

• Name: Geef je vraag een eigen naam
• Action: Hier kan je de actie definiëren die moet gebeuren nadat de gebruiker de vraag heeft gedaan ( naar een bepaalde pagina gaan, een URL openen, audio of video afspelen, etc.)
• Score: Definieer hier hoe zwaar je de vraag wilt laten meetellen in de totaalscore
• Style: Stel hier transparantie en padding in
• Background style: Hier kan je de vraag achtergrondkleur, randkleur, -breedte en transparantie instellen
• Shape Style: Geef de vraag ronde of rechte hoeken
• Background image: Wanneer je elementen naar een afbeelding wilt laten slepen, kan je hier de achtergrondafbeelding instellen.
• Background image style: bepaal de uitlijning van de achtergrondafbeelding.
• Workspace: Hier stel je de afmeting in van het antwoordgedeelte in de drag-and-dropmodule. Bij het vergroten of verkleinen van de module kan de schaal van de werkruimte veranderen, maar de beeldverhouding blijft vast.
• Hint: Wanneer je de gebruiker een hint wil geven, kan je hier Titel en Tekst van de hint ingeven en de hint stylen
• Position and size: Stel hier de exacte positie en het formaat van de vraagcontainer in
• Initial animation: Bepaal of je de vraag op een geanimeerde manier wilt laten verschijnen op de pagina
• Visible on start: Stel in of de vraag vanaf het begin zichtbaar moet zijn op de pagina (of pas na een actie waarbbij je ‘change property’ hebt ingesteld)
• Transform: Dit biedt de mogelijkheid om je vraag procentueel te vergroten of te verkleinen en om de rotatie in te stellen
• Transform Origin: bepaalt de basispositie van waaruit een animatie start

Heb je alle vraaginstellingen goed staan? Dubbelklik dan op de vraagtitel en stel de layout van de vraagtitel in.

Instellen drag and drop elementen

Het instellen van de Drop Targets (doel) en de antwoordopties (de te slepen tekst of afbeeling) gaat als volgt:

Klik onderaan de vraag op de blauwe button ‘Add Element’. De volgende opties verschijnen: ‘Drop Target, Image en Text’.

Add element -> Drop Target

Drop Target geeft het gebied aan waar items (tekst of afbeelding) naar toe worden gesleept. Je kunt zoveel Drop Targets aanmaken als je wilt.

• Naam: geef de Drop Target een herkenbare naam
• Behavior: Hier kan je instellen of er meerdere antwoorden goed zijn
• Enable Auto-Alignment: wanneer je dit aanvinkt, worden de gesleepte items gecentreerd in de drop target. Als je vakje niet selecteert, worden de gesleepte items geplaatst waar de gebruiker ze neerzet.
• Correct answers: hier stel je in welke teksten of afbeeldingen bij dit Drop Target horen. Dit doe je pas als je ook de Teksten en Afbeeldingen toegevoegd hebt
• Visibility: stel in of je wilt dat het Drop Target kader altijd zichtbaar, altijd verborgen of zichtbaar bij het slepen is
• Position en Size: bepaal de exacte positie en het exacte formaat van de Drop Target
• Transform: Dit biedt de mogelijkheid om je vraag procentueel te vergroten of te verkleinen en om de rotatie in te stellen
• Transform Origin: bepaalt de basispositie van waaruit een animatie start.

Je kunt zoveel Drop Targets instellen als je zelf wilt.

Add element -> Image

Als je op Add Element -> Image klikt, verschijnt een vlak waarin je een afbeelding kunt zetten. Je kunt hiervan het volgende instellen:

• Position and Size: bepaal de exacte positie en het exacte formaat van de afbeelding
• Image: upoad de afbeelding en/of selecteer hem in de bibiliotheek
• Change all answer option styles: wanneer dit is aangevinkt, is de styling van alle antwoordopties hetzelfde
• Button style: stel hier transparantie en vorm van de hoeken in

Je kunt zoveel Afbeeldings elementen toevoegen als je zelf wilt.

Add element -> Text

Als je op Add Element -> Text klikt, verschijnt een vlak waarin je een afbeelding kunt zetten. Je kunt hiervan het volgende instellen:

• Position and Size: bepaal de exacte positie en het exacte formaat van het tekstvlak
• Answer: vul hier de antwoordtekst in
• Change all answer option styles: wanneer dit is aangevinkt, is de styling van alle antwoordopties hetzelfde
• Button style: Stel hier lettertype, grootte, kleur, uitlijning, en layout van het tekstvak in

Je kunt zoveel Text elementen toevoegen als je zelf wilt.

Correcte antwoorden instellen

Dubbelklik op een drop target om het instellingenpanel aan de linkerkant te openen. Onder 'Correct Answers' kan je nu aanvinken welke antwoorden correct zijn voor deze Drop Target. Doe dit voor elke Drop Target die je hebt ingesteld.

With the Drag and Drop question, you can let users drag elements such as text or images to the correct position on the canvas (answer area).

To use this question type, go to the left navigation panel, select “Question Module”, and choose “Drag and Drop.”

Question Settings

The question will now appear on your canvas, along with several configuration options:

• Name: Give your question a custom name
• Action: Define what happens after the user completes the question (e.g., go to a page, open a URL, play audio or video)
• Score: Define how much this question contributes to the total score
• Style: Adjust transparency and padding
• Background Style: Set background color, border color, border width, and transparency
• Shape Style: Choose between rounded or sharp corners
• Background Image: Add an image if you want users to drag elements onto an image
• Background Image Style: Define the alignment of the background image
• Workspace: Set the size of the answer area in the drag-and-drop module. When resizing, the scale may change, but the aspect ratio remains fixed
• Hint: Add a hint with a title and text, and style it as needed
• Position and Size: Define the exact position and size of the question container
• Initial Animation: Choose whether the question appears with an animation
• Visible on Start: Decide whether the question is visible immediately or only after a specific action (using “change property”)
• Transform: Scale or rotate the question container
• Transform Origin: Define the starting point for transformations or animations

Once all settings are configured, double-click the question title to adjust its layout.

Setting up Drag and Drop Elements

To configure Drop Targets (the destination areas) and answer options (the draggable text or images), follow these steps:

Click the blue “Add Element” button at the bottom of the question. You will see three options:

• Text
• Drop Target
• Image

Add Element → Drop Target

A Drop Target is the area where items (text or images) can be dropped. You can create as many Drop Targets as needed.

• Name: Give the Drop Target a clear name
• Behavior: Define whether multiple answers can be correct
• Enable Auto-Alignment:
  • Enabled: dragged items are centered within the Drop Target
  • Disabled: items stay where the user drops them
• Correct Answers: Define which text or images belong to this Drop Target (after adding them)
• Visibility: Choose whether the Drop Target is always visible, always hidden, or only visible during dragging
• Position and Size: Set the exact position and size
• Transform: Scale or rotate the Drop Target
• Transform Origin: Define the starting point for transformations

You can add as many Drop Targets as needed.

Add eleAdd Element → Image

When you select Image, a container appears where you can place an image.

• Position and Size: Set the exact position and size
• Image: Upload or select an image from the library
• Change all answer option styles: Apply the same styling to all answer options
• Button Style: Adjust transparency and corner shape

You can add as many image elements as needed.

Add Element → Text

When you select Text, a container appears where you can add text.

• Position and Size: Set the exact position and size of the text box
• Answer: Enter the answer text
• Change all answer option styles: Apply consistent styling across all answer options
• Button Style: Configure font, size, color, alignment, and layout

You can add as many text elements as needed.

Setting Correct Answers

Double-click a Drop Target to open the settings panel on the left.

Under “Correct Answers”, select which answer options are correct for that Drop Target.

Repeat this for each Drop Target you have created.