Constructor
new FillInBlanksPanel(act, ps, $divopt)
FillInBlanksPanel constructor
Name | Type | Attributes | Description |
---|---|---|---|
act | module:Activity. | The | |
ps | module:JClicPlayer. | Any object implementing the methods defined in the | |
$div | external:jQuery | <optional> | The jQuery DOM element where this Panel will deploy |
Extends
Members
$animatedBg :external:jQuery
Background element (currently a span
) used to place animated GIFs when needed
- Source
$animatedBgB :external:jQuery
Additional background element for animated GIFs, used in associations
- Source
$canvas :external:jQuery
The jQuery main canvas element used by this panel
- Source
$checkButton :external:jQuery
The button used to check the activity, only when Activity.checkButtonText
is not null
$currentPopup :external:jQuery
The popup currently been displayed
$div :external:jQuery
The jQuery div element used by this panel
- Source
accessibleCanvas :boolean
Always true, since canvas hit regions have been deprecated!
See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
- boolean
- Source
act :module:Activity.Activity
The Activity this panel is related to
- Source
bc :module:boxes/BoxConnector.BoxConnector
The object used to connect cells and other elements in some types of activity
- Source
bgImage :external:HTMLImageElement
The realized image used as a background
- Source
currentItem :number
Currently selected item. Used in some types of activities.
- number
- Source
currentPopupTimer :number
A timer controlling the time the current popup will be displayed
- number
dim :module:AWT.Dimension
The Dimension
of the Rectangle
events :Array.<string>
List of events intercepted by this ActivityPanel. Current events are: 'keydown', 'keyup',
'keypress', 'mousedown', 'mouseup', 'click', 'dblclick', 'mousemove', 'mouseenter',
'mouseleave', 'mouseover', 'mouseout', 'touchstart', 'touchend', 'touchmove' and 'touchcancel'.
- Array.<string>
- Source
firstRun :boolean
true
if the activity is running for first time (not due to a click on the replay
button)
- boolean
- Source
invalidatedRect :module:AWT.Rectangle
The currently "invalidated" area
locked :boolean
Flag indicating if the activity is open or locked
- boolean
minimumSize :module:AWT.Dimension
The minimum size of this kind of ActivityPanel
- Source
playing :boolean
true
while the activity is playing
- boolean
- Source
popupWaitTimer :number
A timer prepared to display a popup after a while
- number
pos :module:AWT.Point
The current position of the shape
preferredSize :module:AWT.Dimension
The preferred size of this kind of ActivityPanel
- Source
prevScreenTimer :number
System timer used to close the previous document when act.maxTime is reached.
- number
ps :module:JClicPlayer.JClicPlayer
The PlayStation used to realize media objects and communicate with the player services
(usually a JClicPlayer
- Source
skin :module:skins/Skin.Skin
The realized current Skin
- Source
solved :boolean
true
when the activity is solved, false
otherwise
- boolean
- Source
spanChars :boolean
When true, text spanning will be done at char level: each single letter will be a clickacle span.
Used only in activities of type "itentify letters"
- boolean
spanText :boolean
When true, all text outside of targets and cells will be inserted as independent words or letters,
using 'span' elements. module:activities/text/TextActivityBase.TextActivityBasePanel#$createSpanElement
can be used
to customize these elements.
- boolean
targets :Array.<external:jQuery>
Array of jQuery DOM elements (usually of type 'span') containing the targets of this activity
- Array.<external:jQuery>
targetsMarked :boolean
Flag indicating if targets must be visually marked at the beginning of the activity.
Should be true
except for IdentifyText
activities.
- boolean
type :string
Shape type id
- string
Methods
$createSpanElement($span) → {external:jQuery}
Creates a 'span' element, used to isolate elements of text not involved in targets.
Used only when spanText
is true.
Name | Type | Description |
---|---|---|
$span | external:jQuery | An initial DOM object (usually a |
- The jQuery DOM element loaded with the span data.
- Type:
- external:jQuery
$createTargetElement(target, $span) → {external:jQuery}
Creates a target DOM element for the provided target. This DOM element can be an editablespan
or a select
with specific option
elements (when the target is a drop-down list)
Name | Type | Description |
---|---|---|
target | module:activities/text/TextActivityDocument. | The target related to the DOM object to be created |
$span | external:jQuery |
|
- The jQuery DOM element loaded with the target data.
- Type:
- external:jQuery
activityReady()
Called by JClicPlayer
when this activity panel is fully visible, just after the
initialization process.
add(shape) → {module:AWT.Rectangle}
Adds the boundaries of another shape to the current one
Name | Type | Description |
---|---|---|
shape | module:AWT. | The |
- Type:
- module:AWT.
Rectangle
attachEvent($obj, evt)
Attaches a single event to the specified object
Name | Type | Description |
---|---|---|
$obj | external:jQuery | The object to which the event will be attached |
evt | string | The event name |
- Source
attachEvents()
Attaches the events specified in the events
member to the $div
member
- Source
buildAccessibleComponents()
Builds the accessible components needed for this ActivityPanel
This method is called when all main elements are placed and visible, when the activity is ready
to start or when resized.
- Source
buildVisualComponents()
Prepares the visual components of the activity
- Source
checkTarget(target, onlyCheck, jumpDirectionopt) → {boolean}
Checks if the specified TextTarget has a valid answer in its currentText
field
Name | Type | Attributes | Description |
---|---|---|---|
target | module:activities/text/TextActivityDocument. | The target to check | |
onlyCheck | boolean | When | |
jumpDirection | number | <optional> |
|
true
when the target contains a valid answer
- Type:
- boolean
clear()
Miscellaneous cleaning operations
- Source
clip(ctx, fillRuleopt) → {external:CanvasRenderingContext2D}
Creates a clipping region on the specified HTML canvas 2D rendering context
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
ctx | external:CanvasRenderingContext2D | The rendering context | ||
fillRule | string | <optional> | 'nonzero' | Can be 'nonzero' (default when not set) or 'evenodd' |
- The provided rendering context
clone() → {module:AWT.Rectangle}
Clones this Rectangle
- Type:
- module:AWT.
Rectangle
contains(_p) → {boolean}
Checks if the provided module:AWT.Point
is inside this shape.
Name | Type | Description |
---|---|---|
_p | module:AWT. | The point to check |
- Type:
- boolean
countSolvedTargets(checkNow, markopt) → {number}
Counts the number of targets with SOLVED
status
Name | Type | Attributes | Description |
---|---|---|---|
checkNow | boolean | When | |
mark | boolean | <optional> | When |
- The number of targets currently solved.
- Type:
- number
enableCounters(eTime, eScore, eActions)
Enables or disables the three counters (time, score and actions)
Name | Type | Description |
---|---|---|
eTime | boolean | Whether to enable or disable the time counter |
eScore | boolean | Whether to enable or disable the score counter |
eActions | boolean | Whether to enable or disable the actions counter |
- Source
end()
Ends the activity
- Source
equals(r) → {boolean}
Checks if two shapes are equivalent.
Name | Type | Description |
---|---|---|
r | module:AWT. | The Shape to compare against |
- Type:
- boolean
evaluatePanel() → {boolean}
Evaluates all the targets in this panel. This method is usually called from the Check
button.
true
when all targets are OK,false
otherwise.
- Type:
- boolean
fill(ctx, dirtyRegionopt) → {external:CanvasRenderingContext2D}
Fills the Shape with the current style in the provided HTML canvas context
Name | Type | Attributes | Description |
---|---|---|---|
ctx | external:CanvasRenderingContext2D | The canvas 2D rendering context where to fill this shape. | |
dirtyRegion | module:AWT. | <optional> | The context region to be updated. Used as clipping |
- The provided rendering context
fitTo(proposed, bounds)
Fits the panel within the proposed
rectangle. The panel can occupy more space, but always
not surpassing the bounds
rectangle.
Name | Type | Description |
---|---|---|
proposed | module:AWT. | The proposed rectangle |
bounds | module:AWT. | The maximum allowed bounds |
- Source
forceFinishActivity()
Forces the ending of the activity.
- Source
getAttributes() → {object}
Gets a object with the basic attributes needed to rebuild this instance excluding functions,
parent references, constants and also attributes retaining the default value.
The resulting object is commonly usued to serialize elements in JSON format.
- The resulting object, with minimal attrributes
- Type:
- object
getBounds() → {module:AWT.Rectangle}
Gets the enclosing Rectangle
of this Shape.
- Type:
- module:AWT.
Rectangle
getCoords() → {string}
Gets a string with the co-ordinates of the upper-left and lower-right vertexs of this rectangle,
(with values rounded to int)
- Type:
- string
getOppositeVertex() → {module:AWT.Point}
Gets the module:AWT.Point
corresponding to the lower-right vertex of the Rectangle.
- Type:
- module:AWT.
Point
getShape(rect) → {module:AWT.Shape}
Gets a clone of this shape moved to the pos
component of the rectangle and scaled
by its dim
value.
Name | Type | Description |
---|---|---|
rect | module:AWT. | The rectangle to be taken as a base for moving and scaling |
- Type:
- module:AWT.
Shape
grow(dx, dy) → {module:AWT.Rectangle}
Expands the boundaries of this shape. This affects the current position and dimension.
Name | Type | Description |
---|---|---|
dx | number | The amount to grow (or decrease) in horizontal direction |
dy | number | The amount to grow (or decrease) in vertical direction |
- Type:
- module:AWT.
Rectangle
intersects(_r) → {boolean}
Checks if the provided Rectangle
r
intersects with this shape.
Name | Type | Description |
---|---|---|
_r | module:AWT. |
- Type:
- boolean
invalidate(rect)
Adds the provided rectangle to the invalidated area.
Name | Type | Description |
---|---|---|
rect | module:AWT. |
isRect() → {boolean}
Shorthand method for determining if a Shape is an Rectangle
- Type:
- boolean
markTarget(target, attributes)
Visually marks the target as 'solved OK' or 'with errors'.
Name | Type | Description |
---|---|---|
target | module:activities/text/TextActivityDocument. | The text target to be marked. |
attributes | Array.<number> |
|
moveBy(delta) → {module:AWT.Shape}
Shifts the shape a specified amount in horizontal and vertical directions
Name | Type | Description |
---|---|---|
delta | Point | | The amount to shift the Shape |
- Type:
- module:AWT.
Shape
moveTo(newPos) → {module:AWT.Shape}
Moves this shape to a new position
Name | Type | Description |
---|---|---|
newPos | module:AWT. | The new position of the shape |
- Type:
- module:AWT.
Shape
playEvent(event)
Plays the specified event sound
Name | Type | Description |
---|---|---|
event | string | The type of event to be performed |
- Source
preInitActivity()
Called when the text activity has a 'previous screen' information to be shown before the
activity starts
preparePath(ctx) → {external:CanvasRenderingContext2D}
Prepares an HTML canvas 2D rendering context with a path that can be used to stroke a line,
to fill a surface or to define a clipping region.
Name | Type | Description |
---|---|---|
ctx | external:CanvasRenderingContext2D |
- The provided rendering context
scaleBy(delta) → {module:AWT.Rectangle}
Multiplies the dimension of the Shape by the specified delta
amount.
Name | Type | Description |
---|---|---|
delta | Point | | Object containing the X and Y ratio to be scaled. |
- Type:
- module:AWT.
Rectangle
setAndPlayMsg(msgCode, eventSoundsCodeopt)
Sets the message to be displayed in the skin message box and optionally plays a sound event.
Name | Type | Attributes | Description |
---|---|---|---|
msgCode | string | Type of message (initial, final, finalError...) | |
eventSoundsCode | string | <optional> | Optional name of the event sound to be played. |
- Source
setAttributes(data) → {module:AWT.Rectangle}
Reads the properties of this Rectangle from a data object
Name | Type | Description |
---|---|---|
data | object | The data object to be parsed |
- Type:
- module:AWT.
Rectangle
setBounds(rect)
Sets the size and position of this activity panel
Name | Type | Description |
---|---|---|
rect | module:AWT. |
- Source
setDimension(maxSize) → {module:AWT.Dimension}
Sets the real dimension of this ActivityPanel.
Name | Type | Description |
---|---|---|
maxSize | module:AWT. | The maximum surface available for the activity panel |
- Source
- Type:
- module:AWT.
Dimension
setDocContent($div, doc)
Fills a jQuery DOM element (usually a 'div') with the specified TextActivityDocument
.
Name | Type | Description |
---|---|---|
$div | external:jQuery | The jQuery DOM object to be filled with the document. |
doc | module:activities/text/TextActivityDocument. | The document |
showHelp()
Displays help about the activity
- Source
showPopup($popup, maxTime, waitTime)
Name | Type | Description |
---|---|---|
$popup | external:jQuery | The popup to display, or _null _ to just hide the current popup |
maxTime | number | The maximum time to mantain the popup on screen, in seconds |
waitTime | number | When set, indicates the number of seconds to wait before show the popup |
shuffle(bg, visible, fitInArea)
Shuffles the contents of the activity
Name | Type | Description |
---|---|---|
bg | Array.<module:boxes/ActiveBoxBag.ActiveBoxBag> | The sets of boxes to be shuffled |
visible | boolean | The shuffle process must be animated on the screen (not yet implemented!) |
fitInArea | boolean | Shuffled pieces cannot go out of the current area |
- Source
stroke(ctx) → {external:CanvasRenderingContext2D}
Draws this shape in the provided HTML canvas 2D rendering context.
Name | Type | Description |
---|---|---|
ctx | external:CanvasRenderingContext2D | The canvas 2D rendering context where to draw the shape. |
- The provided rendering context
toString() → {string}
Overwrites the original 'Object.toString' method with a more descriptive text
- Type:
- string
update()
Updates the invalidated area
updateContent(dirtyRegion)
Activities should implement this method to update the graphic content of its panel. The method
will be called from module:AWT.Container#update
when needed.
Name | Type | Description |
---|---|---|
dirtyRegion | module:AWT. | Specifies the area to be updated. When |
- Source