> For the complete documentation index, see [llms.txt](https://everyday-digital.gitbook.io/authoring-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/drag-+-drop.md).
# Drag + Drop
## What is a Drag + Drop activity?
This page allows you to create a drag & drop activity using up to 6 card options, one of which is the correct card/answer.
## Quick steps: how to create & edit a Drag + Drop page
1. **Open Authoring.** Create or open a [Learning Story](applewebdata://BFDE02A8-0A9C-4EC6-92AD-126FC76B7285/o/-LkZMh7HTpHtgrDm7Uox/s/uVFZPn6NWEBzyt3Pl8h6/authoring/content-types/learning-story), [Assessment](applewebdata://BFDE02A8-0A9C-4EC6-92AD-126FC76B7285/o/-LkZMh7HTpHtgrDm7Uox/s/uVFZPn6NWEBzyt3Pl8h6/authoring/content-types/assessment) or [Survey](applewebdata://BFDE02A8-0A9C-4EC6-92AD-126FC76B7285/o/-LkZMh7HTpHtgrDm7Uox/s/uVFZPn6NWEBzyt3Pl8h6/authoring/content-types/survey) [content type](applewebdata://BFDE02A8-0A9C-4EC6-92AD-126FC76B7285/o/-LkZMh7HTpHtgrDm7Uox/s/uVFZPn6NWEBzyt3Pl8h6/authoring/content-types).
2. **Add or open a Story, Assessment or Survey.** Open the Editor.
3. **Add a Drag + Drop page.** Select the + icon and choose Drag + Drop from the Add Page page options.
4. **Update the Text page to edit.** Select the page to view the [Page Options](applewebdata://BFDE02A8-0A9C-4EC6-92AD-126FC76B7285/o/-LkZMh7HTpHtgrDm7Uox/s/uVFZPn6NWEBzyt3Pl8h6/story-templates/working-with-stories#what-are-the-page-options), and then select Update to edit.
5. **Add questions/instructions and cards.**
* Enter a heading and a question (limited to 24 and 195 characters respectively).
* Select the question type and then upload your cards (up to six). The first card should be the correct option (if Assessment type is selected). Cards must be portrait orientation and at least 420x588px in .svg, .jpg or .png format.
6. **Add a Drop Card (Optional).** You can upload a single card that serves as the placeholder for where the correct card should be placed.
7. **Create a Response (Optional).** Select the Add Response button to provide user feedback for correct and/or incorrect answers.
## Drag + Drop Settings
**Text (a clue or instruction)**\
Enter a heading and instruction (limited to 24 and 195 characters respectively). \
\
**Background Colour**\
Select an alternative background colour to override the theme default.
**Question Type**\
Choose [Assessment or Survey.](#what-are-the-question-types-in-the-drag-+-drop-activity)
**Cards (you can have up to six)**\
Upload the cards, ensuring that the first one uploaded is the correct card (if in assessment mode). Cards must be portrait orientation and at least 420x588px in .svg, .jpg or .png format.
**Drop Area**\
Choose a crad to represent the space into which the correct card must be placed.
## Text page Tips and FAQs
### How do I create a Response?
Select the Add Response button and upload an image or icon and enter the dialog text. Dialogs that have over 40 characters will show as a pop up.
### How does Drag + Drop work?
The Drag + Drop page presents a user with text instructions and up to six cards - one of which is the correct response to the text instruction or question.
The user can tap to select a card and will then be able to drag and place the card onto the drop space provided.
You can [add a response](#how-do-i-create-a-response) to provide user feedback for correct and incorrect answers.
### What are the question types in the Drag + Drop activity?
* **Assessment** - there is only one correct answer and attempts may be limited.
* **Survey** - there is no correct answer.
{% content-ref url="/pages/w3jMVYIg981TlWHZxkCt" %}
[Authoring Settings](/authoring-docs/authoring-editor/authoring-settings.md)
{% endcontent-ref %}
### What are the image specifications for the Drag + Drop activity cards?
Each card should be portrait and be at least 420x588px big or at a higher ratio (.svg, .jpg or .png format). You may also upload a card that represents the drop area where the correct card must be dropped.
### The incorrect card is being selected in the Drag + Drop activity
**The first card that you upload will always be the correct one.** If there is an issue, re-upload all cards, making sure that the first one you load is the correct one. When presented to the user, the cards will automatically be shuffled.
### Add a Drag + Drop Activity Guide
Add an [Activity Guide](/authoring-docs/content-pages/content-page-library/activity-guide.md) before the Drag & Drop page to help users understand how to complete the drag & drop activity.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/drag-+-drop.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.