What is Drag and Drop Interface. Drag and Drop Technology in Android Drag and Drop Events

It's easier to take something and put it than to write what you need to take and where to put it. Of course, without a mouse, or a similar device, you can’t select or specify anything, but even in the current state of things, using the drag and drop idea is very natural and comfortable.

The scope of the idea is not only online stores, digital libraries, search or Information Systems, but also the applied area. The idea is very applicable in the development of sites and their elements, created and maintained interactively, without the participation of a programmer.

Description of the idea

Select, move and put - the idea is natural and convenient. It is simply amazing that it was not born when the mouse became an indispensable accessory for the computer.

The most obvious example is choosing a product in an online store. Take with mouse desired product and drag it to the shopping cart - simple, natural and convenient. File Upload: Taking a document outside of the browser window and placing it on a page element, thus initiating the transfer of the document to the server, is also a practical idea.

For the developer, the idea of ​​"drag and drop" is the manipulation of page elements without manually recalculating the coordinates and sizes of tags, the ability to select multiple elements and align them, and move the sides of block tags.

HTML and CSS - great languages descriptions of tags and their design styles, but when a developer has the ability to interactively manipulate page elements without manually recalculating coordinates and sizes, this makes the work more comfortable and efficient.

Easy file transfer

"Drag and drop": translation from English into Russian literally sounds like "drag and drop." In practice, it sounds and works better: chose, transferred and let go - simply and naturally.

Implementing file transfers on a page to a page, to a server, or for other use is very simple.

IN this example Several files on the desktop were selected with the mouse (left figure). On the selection, the left mouse button was pressed and the selected "went" to the basket. The browser itself showed how this happens, wrote a “copy” hint and created the outlines of the files being moved around.

When the mouse was over the cart, the visitor released the left mouse button, the drag and drop event took place, and on the site page (bottom image), the JavaScript code was able to receive and process all the files that the visitor provided to the page (site).

Implementation Description

The code that performs this procedure is very simple. Even a novice developer can repeat it in any use cases.

Here, the user interface is represented by two tags: scPlaceFile (this is the basket itself where you want to put files) and scPlaceFiles (this is the result of processing files, in this case a list of them).

The logic of the page is as follows. When the page is loaded in the browser, the "ondrop" event handler is assigned in the basket - put, the rest of the events are blocked and not used.

The page works normally, but as soon as the visitor selects the file (files) and drags them to the basket image, that is, to the scPlaceFile tag, the “files have arrived” event will be processed.

This handler simply displays a list of files. Their number is in event.dataTransfer.files.length, and information about each file is in event.dataTransfer.files[i].name. What to do with the received data is determined by the developer, in this case, a list of received files is simply formed.

Once processed, the event is blocked and not propagated. This is necessary so that the browser does not engage in amateur activities and does not interfere with the processing of the information received.

DnD and external data

Uploading images to the server in "drag and drop" is a common practice in this technology. Typically, a developer creates a file upload form (1) that works in the usual way (2). The visitor can normally select files and upload them.

However, if a visitor drags and drops to a certain place in the form, then the file name field (files) will be filled in automatically.

This good decision. It is, of course, very difficult to admit that there is no mouse on the computer. But it is better to develop the user interface in the usual way and in the DnD implementation.

DnD and internal data

Taking care of the interests of the visitor is always important, but the concerns of the developer also matter. You can implement "drag and drop" not only standard means, but also by handling mouse events on page elements.

The task of calculating tag coordinate values ​​and their sizes arises constantly. Manual calculation is good practice, but the interactive option is more convenient. All tags are always rectangular in shape, and by monitoring mouse events on the sides of elements, you can create the ability to automatically move elements to Right place pages or change them.

Handling the mouse button click event - remembering the coordinates of the click location, for example, one of the sides of the element. Move the mouse - the side moves in the desired direction. Releasing the mouse button - the side stops and its coordinates change. This way you can change the position of the element or its size.

It's not formally drag and drop, but the effect is similar and practical. By making universal handlers for any page element, you can get a good interactive result, speed up development and simplify the code.

Visual and manual programming

A mouse on a computer and fingers on a smartphone are completely different approaches to the implementation of the user interface (visitor, developer). It is a completely natural and modern requirement for cross-browser compatibility.

All this together complicates the creation of pages, but applying the idea of ​​"drag and drop" in its standard form, using its events, combining this idea with the usual events on elements, you can implement a mechanism in which the creation of the page will occur visually.

Now let's look at the selection of an element or elements. Selection fact - the appearance of a context menu, for example, the goal is to align the selected one (left, right, center), or distribute elements vertically or horizontally with the same step, or change their sizes (minimum, maximum).

Automatic recalculation of coordinates and dimensions is preferable to manual. Fewer mistakes - the goal is reached faster. In addition, you can make a page in one browser, save the position and size of elements. By opening this page on a smartphone, you can correct the coordinates and dimensions and remember them for specific model smartphone or browser version.

So the same page without manual compliance with the cross-browser compatibility requirement will have different data to display on various devices and in different browsers.

If you allow the visitor to perform these procedures on their own, as well as select the necessary page elements from among those provided by the developer, you can ensure cross-browser compatibility and the required functionality of the page, taking into account the user's opinion.

182

In this example, we select a div element and make it moveable by calling on it draggable() method. As shown in the figure below, in the opened document, the element takes its usual position, but after that it can be moved with the mouse pointer to any place in the browser window:

The drag and drop feature is useful on its own, but it's even more useful when used in conjunction with the Droppable interaction, which is described next.

Draggable interaction is implemented solely through the use of specific HTML markup and CSS styles. This means that this functionality will work in almost any browser, but elements endowed with it will not be able to work with similar ones. own funds Drag-and-drop operating systems.

Drag-and-drop operations defined by the HTML5 specification are usually implemented using native operating system mechanisms. If you are using the jQuery UI drag-and-drop mechanism, then in order to avoid conflict situations HTML5 equivalents are best disabled. To do this, set the draggable attribute of the document's body element to false.

Customizing Draggable Interaction

There are many customization options for Draggable interaction. The most important properties covered in the following sections are summarized in the table below:

Draggable interaction properties

Property	Description
axis	Restricts movement to certain directions. The default value is false, which means no restrictions, but you can also specify the value "x" (move only along the x-axis) or "y" (move only along the y-axis)
containment	Restricts the location of the floating element to a specific area of ​​the screen. Supported value types are described in the table below, with the corresponding example. The default value is false, it means no restrictions
delay	Specifies the amount of time an element must be dragged before it moves. The default value is 0, which means no delay
distance	Specifies the distance the user must drag an element from its starting position before it actually moves. The default value is 1 pixel
grid	Forces binding of the moved element to the grid cells. The default value is false, which means no binding

Restriction of directions of movement

There are several ways in which you can restrict the movement of an element to certain directions. The first of these is to use the axis option, which allows you to limit the direction of movement to the X or Y axis. An example is shown below:

...

Run Example

In this example, we define two div elements, select them with jQuery, and call the draggable() method. This method is passed an object that initially restricts both divs to move along the x-direction. By then applying the jQuery filter() method, we are able to select the dragV element without re-search with jQuery throughout the document and set it to another allowed movement direction - along the Y axis. Thus, we get a document in which one div element can only be dragged in the vertical direction, and the other - only in the horizontal direction. The result is shown in the figure:

Restricting the allowable area to move an element

You can also limit the area of ​​the screen where you can drag an element. For this, the containment option is used. The value formats that can be specified in this option are described in the table below:

An example of using the containment option is shown below:

...

Run Example

In this example, both elements are constrained to move so that they can only be dragged within the parent element, which is a fixed-size div element. One of the floating divs has an additional constraint, using the axis option, that it can only move horizontally within the parent element. The result is illustrated in the figure:

Restricting the ability to move an element to grid cells

The grid option allows you to set the binding of the moved element to the grid cells. This option accepts an array of two elements that specifies the width and height of the grid cells in pixels. An example of using the grid option is shown below:

...

Run Example

In this example, the grid is set to 100 pixels wide and 50 pixels high. When you drag an element, it "jumps" from one (invisible) cell to another. The snapping effect is a great use case for the interaction functionality, but it's hard to convey with screen shots.

You can create a snapping effect for only one direction by setting the free-motion axis to 1. For example, if you set the grid option to , the element will snap to 100px wide grid cells when moving horizontally, but it will move freely vertically.

Travel Delay

There are two options that allow you to delay the dragging of a floating element. With the delay option, you can set the time in milliseconds that the user must drag the mouse pointer before the element is actually moved. Another kind of delay is provided by the distance option, which specifies the distance, in pixels, that the user must drag the mouse pointer before an element follows it.

An example of using both settings is shown below:

...

Run Example

In this example, there are two floating elements, one of which has a delay set with the delay option, and the other with the distance option.

In the case of the delay specified by the delay option, the user must drag for the specified amount of time before it actually moves the element. In this example, the duration of this gap is 1000 ms. It is not necessary to move the mouse during this time, but the mouse button must remain pressed during the entire delay period, after which the element can be moved by moving the mouse. After the delay time has elapsed, the element being moved will snap to the position of the mouse pointer, subject to the constraints imposed by the grid, region, and axis options discussed earlier.

The distance option has a similar effect, but in this case the user must drag the mouse pointer at least the specified number of pixels in any direction from the element's starting location. The item being moved will then jump to the current pointer location.

If you apply both settings to the same element, then the element being moved will not move until both delay criteria are met, i.e. until the attempt to drag the element lasts for the specified time and until the mouse pointer moves the specified number of pixels.

Using Draggable Interaction Methods

All of the methods defined for Draggable interaction are part of the set of basic methods that you've already seen in widgets. Methods specific to Draggable interaction are not provided, so we won't cover them in detail. Scroll available methods shown in the table below:

Using Draggable Interaction Events

Draggable interaction supports a simple set of events that notify when an element is being dragged. These events are described in the table below:

As with widget events, these events can also be reacted to. An example of handling the start and stop events is shown below:

...

Run Example

This example uses the start and stop events to change the text content of an element during the dragging process. This opportunity is a consequence of the fact that the Draggable interaction is implemented exclusively using HTML tools and CSS: You can use jQuery to change the state of a floating element even while it is moving across the screen.

Using the Droppable interaction

In some situations, dragging an element alone can be enough, but it is most useful when used in conjunction with the Droppable interaction.

Elements to which the Droppable interaction has been applied (accepting elements) gain the ability to accept droppable elements created with the Draggable interaction.

The receiving elements are created with droppable() method, but to get useful functionality, you will need to create event handlers from among those defined for this kind of interaction. The available events are shown in the table below:

Droppable interaction events

Event	Description
create	Occurs when a Droppable interaction is applied to an element
activate	Occurs when the user starts dragging a floating element
deactivate	Occurs when the user stops dragging a floating element
over	Occurs when the user drags a floating element over the receiving element (but assuming the mouse button has not yet been released)
out	Occurs when the user drags a floating element outside of the receiving element
drop	Occurs when the user leaves a floating element on the receiving element

An example of creating a simple receiving element that has a single drop event handler is given below:

...

Run Example

In this example, a div element is added to the document, the text content of which is represented by the string "Leave it here". We select this element using jQuery and call the droppable() method, passing it a settings object that defines a handler for the drop event. The response to this event is to change the text of the floating element using the text() method.

The Drag-and-drop interaction we create in this example is the simplest, but it provides a useful context for explaining how Draggable and Droppable interactions work together. The different stages of the process of dragging and dropping elements are illustrated in the figure:

All this looks very simple. We drag the element being moved until it is above the receiving element and release it. The dropped element remains where it was left, and its text content changes in response to the occurrence of the drop event. The following sections show you how to use other Droppable interaction events to improve the user experience.

Target Receiving Object Highlight

By using the activate and deactivate events, you can highlight the target receiving object when the user begins the process of dragging an element. In many situations, this idea is very fruitful because it gives the user a reliable indication of which elements are part of the drag-and-drop model. The relevant example is shown below:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Dropped ") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ... Run the example

As soon as the user starts dragging the element, the activate event - associated with our receiving element - fires, and the handler function uses the css() method to change the element's border and background-color CSS properties. As a result, the target receiving element is highlighted, indicating to the user that there is a connection between it and the element being moved.

The deactivate event is used to remove CSS property values ​​from the receiving element and reset it as soon as the user releases the mouse button. (This event fires whenever the dragging of an element stops, regardless of whether the dragged element is left on the receiving element or not.) This process is illustrated in the figure:

Element Overlap Handling

Drag-and-drop technology can be improved by adding over and out event handling to it. The over event occurs when 50% of the element being moved is above any part of the receiving element. The out event fires when previously overlapping elements no longer overlap. An example response to these events is shown below:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Dropped") ) , activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Run Example

The same handler functions are used here as in the previous example, but in this case they are associated with the over and out events. When at least 50% of the floating element overlaps with the receiving element, it is framed and its background color changes, as shown in the figure:

This 50% limit is called the tolerance threshold, which can be set when creating the receiving element, as will be shown next.

Droppable interaction setup

The Droppable interaction has a number of properties that you can modify to customize its behavior. These properties are listed in the table below:

Droppable interaction properties

Property	Description
disabled	If this option is true, the Droppable interaction functionality is initially disabled. Default value is false
accept	Narrows down the set of floating elements that the receiving element will respond to. The default value is *, it matches any element
activeClass	Defines a class that will be assigned in response to the activate event and removed in response to the deactivate event
hoverClass	Defines a class that will be assigned in response to an over event and removed in response to an out event.
tolerance	Specifies the minimum degree of overlap at which the over event occurs

Restriction on allowed floating elements

You can limit the set of droppable elements that will be accepted by an element that has the Droppable interoperability functionality by using the accept option. The value of the accept option should be a selector. As a result of this event, Droppable interactions will only occur if the element being moved matches the specified selector. The relevant example is shown below:

...

Run Example

In this example, there are two floating elements with IDs drag1 and drag2. When creating an accepting element, the accept option is used, with which we indicate that only the drag1 element will be an acceptable floating element.

When dragging the drag1 element, you will see the same effect as in the previous examples. The activate, deactivate, over, and out events will fire on the receiving element at the appropriate times. At the same time, if you drag a drag2 element that does not match the selector specified in the accept parameter, then these events will not be fired. This element can be freely moved, but it will not be accepted by the receiving element.

Note the change in the way you select an acceptable floating element on which to call the text() method. When there was only one floating element in the document, the id attribute was enough for this:

Drop: function() ( $("#draggable").text("Dropped") ),

In this example, there are two floating elements, and selecting by the id attribute will not give the desired result, since the text in this case will always change in the same floating element, regardless of which one is acceptable for the receiving element.

The solution is to use the ui object that jQuery UI provides as an additional argument to each event handler. The draggable property of the ui object returns jQuery object A that contains the element that the user is dragging or trying to drop on the target element, allowing the desired element to be selected as follows:

Drop: function(event, ui) ( ui.draggable.text("Dropped") ),

Changing the overlap threshold

By default, the over event only fires when at least 50% of the element being moved overlaps the receiving element. The amount of this threshold overlap can be changed using the tolerance option, which can take on the values ​​shown in the table below:

The two values ​​I most often use, fit and touch, are the ones that make the most sense to users. I use the fit value when the dragged element should remain in the area of ​​the receiving element where it was moved, and the touch value when the dragged element should return to its original position (an example will be given later). An example of using the fit and touch parameters is shown below:

The clone value tells jQuery UI to create a copy of the floating element along with all of its content and use the result as a helper element. The result is shown in the figure:

The helper element is removed when the user releases the mouse button over the element being moved, leaving the element being moved and the receiving element in their original positions.

As shown in the figure, the original floating element remains in its place and only the auxiliary element moves across the screen following the mouse pointer. If the size of the element being moved is large, as in our example, then it covers the rest of the elements of the document, so it will be difficult for the user to even track the position of the receiving element. This problem can be dealt with by providing a function as the value of the helper option, as shown in the example below:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Run the example

When the user starts dragging an element, jQuery UI calls the function specified by the helper parameter and uses the returned element as the drag object. In this case, I'm using jQuery to create the img element. The result is shown in the figure:

The small image acts as a placeholder for the floating element, making it much easier to keep track of other elements in the document.

The ui object that jQuery UI passes to Droppable interaction events contains a helper property, and this property can be used to manipulate the helper element while it is being dragged. An example of using this property in conjunction with the over and out events is shown below:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Here the over and out events and the ui.helper property are used to display a border around the helper element when it overlaps the host element. The result is shown in the figure:

Snap to the edges of elements

By using snap options it is possible to achieve that the element being moved is "attracted" to the edges of the elements next to which it passes. This option takes a selector as its value. The floating element will snap to the edges of any element that matches the specified selector. An example of using the snap option is shown below:

Run Example

When a moveable element approaches one of the matched elements, it is sort of "pulled" to it in such a way that their adjacent edges touch. For such a binding, you can select any element, not just the receiving one. In this example, I've added a div element and set the snap option to a value that selects this element in the document, as well as the receiving element.

There are a couple of sub-options that let you fine-tune how elements behave with regard to anchoring. One of them is snapMode option. It can be used to specify the type of binding. The following values ​​are allowed: inner(snap to inner edges of elements), outer(snap to outer edges of elements) and both(snap to all edges; default).

snapTolerance option allows you to specify how far the floating element must approach the edge of the target element before snapping occurs. The default value is 20 which means 20 pixels. The example uses a value of 50, which corresponds to an anchor at a greater distance. It is very important to choose the right value for this option. If the value of the snapTolerance option is too low, then the user may not notice the snapping effect, and if it is too high, the element being moved will start to jump unexpectedly, snapping to elements far away.

For a long time now, there have been JavaScript functions that allow us to create drag & drop interfaces. But none of these implementations are native to the browser. HTML5 has its own method of creating drag & drop interfaces (with a little JavaScript). In this article, we will tell you how this can be achieved...

Browser support

HTML5 drag & drop is currently supported by all major desktop browsers (including IE (even IE 5.5 has partial support)), but is not supported by any of the popular mobile browsers.

Drag&Drop events

At each stage of the drag & drop, various events are fired to let the browser know which JavaScript code to execute. List of events:

• dragStart: fired when the user starts dragging elements;
• dragEnter: fired when the dragged element is first dragged over the target element;
• dragOver: fired when the mouse moves over an element while a drag is in progress;
• dragLeave: fired if the user's cursor leaves the element while dragging;
• drag: fired every time we move the mouse while dragging our element;
• drop: fired when the actual drop is executed;
• dragEnd: fired when the user releases the mouse button while dragging an object.

With all these event listeners, you have good control on how the interface will work.

dataTransfer object

This is where all the drag&drop magic happens. This object contains the data that was submitted by the drag operation. Data can be established and obtained in a variety of ways, the most important of which are:

• dataTransfer.effectAllowed=value: Returns the allowed action types, possible values ​​are none, copy, copyLink, copyMove, link, linkMove, move, all, and uninitialized.
• dataTransfer.setData(format, data): Adds specific data and format.
• dataTransfer.clearData(format): Clears all data for a specific format.
• dataTransfer.setDragImage(element, x, y): sets the image you want to drag, the x and y values ​​indicate where the mouse cursor should be (0, 0 will position it top left).
• data = dataTransfer.getData(format) : As the name suggests, it returns data for a particular format.

Creating a drag&drop example

Now we will start creating a simple drag&drop example. As you can see we have two small divs and one big one, we can drag the small divs inside the big one and even move them back.

Dragging an object

The first thing we need to do is create the HTML. We make divs draggable with the draggable attribute:

Once that's done, we need to define a JavaScript function that will fire as soon as we start moving this element:

Function dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; return true; )

In this code, we first declare what type of effect we are allowing in the operation and set it to move. On the second line, we set the data to work with, where the text will be Text and the value will be the ID of the element we are dragging. After that, we use the setDragImage method, which will set what we will drag, and then where the cursor will be during the drag, and since the cubes are 200 by 200 pixels, we placed it in the very center. At the end, we return return true.

Drop object

In order for an element to accept a drop, it must listen for 3 different events: dragEnter, dragOver, and the drop event. So let's add this to our HTML5 div with ID big:

function dragEnter(ev) ( ev.preventDefault(); return true; ) function dragOver(ev) ( ev.preventDefault(); )

In the first function, we define what should happen when the element we are dragging reaches the desired element where the drop should occur, in this case we are only preventing the default behavior of the browser. Next, in the dragOver function, we just don't allow drop to happen by default.

In the next part, we define a function for when an element is "thrown" on the desired target:

Function dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )

In this last part, we first set the data variable where we get all the data that is available to text format, and then we add data to the div where we want to drop the element.

Make the drop section a target

The demo shows that two divs can be moved back into place. Luckily, adding another drop target is a lot easier than you might think. Because we already have these functions and all we need to do is add event listeners:

And that's all it takes to allow the div to be dragged back into place.

There are many drag&drop applications that are built with using JavaScript libraries, and are often easier to use. But we hope that in this HTML5 and JavaScript technique, you will see the future potential for solving your problems.

Where GUI elements are implemented using pseudographics) using the mouse or touch screen.

The method is implemented by "capturing" (by pressing and holding the main ( first, more often the left) mouse button) of an object displayed on the computer screen, programmatically available for such an operation, and moving it to another place (to change the location) or “throwing” it onto another element (to call the corresponding action provided by the program). In relation to windows (also capable of being moved in a similar way) this term usually not used.

Basic actions and the most simple examples drag-and-drop actions are: moving an object, moving an object in from panel to panel, although in modern operating systems drag-and-drop has been widely used and is one of the main ways to interact with a computer in a graphical user interface.

The following interface elements can be objects for moving: Desktop icons (icons), floating toolbars, program shortcuts in the Taskbar (starting with Win XP), TreeView elements, text string, DataGridView cell., also OLE elements. Objects can move both within a certain area, within one window, between panels of one window, and between different windows.

The drag event must be triggered by some user action. Most often, this action is a left mouse button press on an element (this event is called MouseDown), which can be moved in its container. Some components have their own drag-n-drop start events - for example, the TreeView has an ItemDrag event.

Wikimedia Foundation. 2010 .

See what "Drag-and-drop" is in other dictionaries:

drag and drop- 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [engl. drag „ziehen“ + and „und“ + drop „fallen… … Universal-Lexikon

The form for performing any action in graphical interfaces user, implying the use computer mouse. Translated from English means literally: drag and drop. The action is performed by operating on the visible on the screen ... ... Glossary of business terms

drag and drop- (computing) To move an icon, file, etc across the screen using a mouse and release it in a different place (dragˈ and dropˈ adjective) Main Entry: drag … Useful english dictionary

drag and drop- IT to move something from one area of ​​a computer screen to another using the mouse: »The software allows you to drag and drop elements for the page images, text, etc. anywhere you want. Main Entry: drag … Financial and business terms

drag-and-drop- UK US verb n.; Gen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)

Liked the article? Share with your friends:
Facebook
Twitter
My world
In contact with
Google Plus
17.05.2020
Computer
The most interesting:

Label each polygon and measure the side lengths of each.

Connect YouTube to TV

Names of large numbers Solution of a compound problem