The new PCIbex Farm is here! Be sure to check out all of its new features and changes.

Link Search Menu Expand Document

DragDrop element

description

Allows dragging elements into the specific space.

syntax

newDragDrop(ELEMENT_NAME: string)
  • ELEMENT_NAME: The name of the newly-created element.

since

beta 2.0

example(s)


@newDragDrop("dd", "bungee")
@        .log()
@        // listOfWords is a dropzone as well as the gaps are
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@       // dropping a word on gap-0 or gap-1 will swap any word already present
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        // words will have a 0.5em horizonal offset from the left edge of the gap Canvas elements
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        // Wait until both gap-0 and gap-1 have been droppped a word onto them
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Creates gap-0 and gap-1 into which words have to be dropped from the displayed list.

Action commands

dragdrop.addDrag

syntax

.addDrag()

description

Adding a feature to the element to be draggable.

example

click to expand

@newDragDrop("dd", "bungee")
@        .log()
@        // listOfWords is a dropzone as well as the gaps are
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
$        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        // dropping a word on gap-0 or gap-1 will swap any word already present
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        // words will have a 0.5em horizonal offset from the left edge of the gap Canvas elements
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        // Wait until both gap-0 and gap-1 have been droppped a word onto them
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Adding draggable feature to the text with the ID of “sentence”.
↑ back to top

dragdrop.addDrop

syntax

.addDrop()

description

Adding a feature to the element to be droppable.

example

click to expand

@newDragDrop("dd", "bungee")
@        .log()
@        // listOfWords is a dropzone as well as the gaps are
$        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        // dropping a word on gap-0 or gap-1 will swap any word already present
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        // words will have a 0.5em horizonal offset from the left edge of the gap Canvas elements
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        // Wait until both gap-0 and gap-1 have been droppped a word onto them
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Adding droppable feature to the canvas “listOfWords”.
↑ back to top

dragdrop.bungee

syntax

.bungee()

description

If an element is dropped outside a drop area, it will go back to its original position.

example

click to expand

$newDragDrop("dd", "bungee")
@        .log()
@        // listOfWords is a dropzone as well as the gaps are
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        // dropping a word on gap-0 or gap-1 will swap any word already present
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        // words will have a 0.5em horizonal offset from the left edge of the gap Canvas elements
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        // Wait until both gap-0 and gap-1 have been droppped a word onto them
@        .wait(
@            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
$getDragDrop("dd").bungee()
  • If a word is dropped outside a drop area, it will go back to its original position.
↑ back to top

dragdrop.callback

syntax

.callback()

description

The commands passed to callback will be run whenever an element is (successfully) dropped.

example

click to expand

@newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
$        .callback(
$            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
$                .css("background-color","lightgray")
$                .print("center at 50vw", "middle at 50vh")
$            ,
$            newTimer(3000).start().wait()
$            ,
$            getText("feedback").remove()
$        )
@        .log("all") // Log every drag event and every drop event
@        .wait()
  • If the element is successfully dropped, the callback will execute the command and print the feedback to the screen.
↑ back to top

dragdrop.drop

syntax

.addDrag()

description

Simulates a drop of element onto the another element

example

click to expand

@ newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
$        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@                .print("center at 50vw", "middle at 50vh")
@            ,
@            newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
  • Simulates a drop of the canvas ‘dot’ onto the canvas ‘start’.
↑ back to top

dragdrop.log

syntax

.log()

description

Will log the time/results of the action to your results file.

example

click to expand

@    newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@                .print("center at 50vw", "middle at 50vh")
@            ,
@           newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
$        .log("all") // Log every drag event and every drop event
@        .wait()
  • In this case, log command logs every drag event and every drop event.
↑ back to top

dragdrop.removeDrag

syntax

.removeDrag()

description

Makes the specified elements no longer draggable.

example

click to expand

@    newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
$        .removeDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@               .print("center at 50vw", "middle at 50vh")
@           ,
@            newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
  • Makes canvas “dot” no longer draggable.
↑ back to top

dragdrop.removeDrop

syntax

.removeDrop()

description

No longer marks the specified elements as dropzones.

example

click to expand

@newDragDrop("dd", "bungee", "swap")
@        .addDrag(getCanvas("dot"),getCanvas("otherdot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
$        .removeDrop(getCanvas("start"),getCanvas("end"))
@        .offset(0, getCanvas("start"))
@        .offset(50, getCanvas("end"))
@        .drop(getCanvas('dot'),getCanvas('start')) // start dropped by default
@        .callback(
@            newText("feedback","Good job! Now make sure that Red is on Start and Blue is on End")
@                .css("background-color","lightgray")
@                .print("center at 50vw", "middle at 50vh")
@            ,
@            newTimer(3000).start().wait()
@            ,
@            getText("feedback").remove()
@        )
  • Area surrounded by canvas “start” and canvas “end” is no longer a dropzone.
↑ back to top

dragdrop.single

syntax

.single()

description

Allows only one element per dropzone at a time.

example

click to expand

@    newDragDrop("dd")
@        .addDrag(getCanvas("dot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(25) 
$        .single()
@        .log()
@        .wait()
  • Will allow only one element on each canvas dropzone at the time.
↑ back to top

dragdrop.swap

syntax

.swap()

description

Will swap elements if dropping one onto an occupied dropzone.

example

click to expand

@ newDragDrop("words", "bungee")
@        .addDrag(getText("hello"),getText("world"),getText("bye"),getText("earth"))
@        .addDrop(getCanvas("word1"),getCanvas("word2"),getCanvas("word3"),getCanvas("word4"),getCanvas("reservoir"))
$        .swap(getCanvas("word1"),getCanvas("word2"),getCanvas("word3"),getCanvas("word4"))
@        .offset('0.5em')
@        .offset('unset', getCanvas("reservoir"))
@        .wait( // make sure all 'word*' dropzones have an element on them
@            self.test.dropped(getCanvas("word1"),getCanvas("word2"),getText("hello"),getCanvas("word4"))
@        )
  • It will swap elements word1, word2, word3, and word4 if dropping one onto an occupied dropzone.
↑ back to top

dragdrop.wait

syntax

.wait()

description

Pauses the script’s execution until one element is dragged and dropped onto a dropzone.

example

click to expand

@    newDragDrop("dd")
@        .addDrag(getCanvas("dot"))
@        .addDrop(getCanvas("start"),getCanvas("end"))
@        .offset(25) // will pin the elements to (25,25) from the top-left edge of the dropzone
@        .single()
@        .log()
$        .wait()
  • Pauses the script’s execution until element “dot” is dragged and dropped onto a dropzone.
↑ back to top


Test commands

dragdrop.test.dropped

syntax

.test.dropped()

description

Tests whether any element, or the specified ones, have been dragged and/or dropped.

example

click to expand

@    newDragDrop("dd", "bungee")
@        .log()
@        .addDrop( getCanvas("listOfWords") , getCanvas("gap-0") , getCanvas("gap-1") )
@        .addDrag( getText("sentence") , getText("illustrate") , getText("dummy") )
@        .swap( getCanvas("gap-0"), getCanvas("gap-1") )
@        .offset('0.5em','0em', getCanvas("gap-0"), getCanvas("gap-1"))
@        .wait(
$            self.test.dropped(getCanvas("gap-0"),getCanvas("gap-1"))
@        )
  • Tests wheter gap-0 and gap-1 have words dropped on them/
  • Script waits for the further execution until both gap-0 and gap-1 have been droppped a word onto them.
↑ back to top