Home

Trickle

Trickle is a extension bundled with the Adapt framework.

Trickle allows you to give your page a step-by-step approach by locking down stages of content.

Visit the page dedicated to Usage and Tips.

Installation

As one of Adapt's core extensions, Trickle is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.

• If Trickle has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt CLI installed, run the following from the command line:
  adapt install adapt-contrib-trickle

• If Trickle has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.

Back to Top

Settings Overview

• Trickle may be configured on two levels: article (articles.json) and block (blocks.json). The Enable on Child Blocks attribute determines whether the configuration applies only to the article or to the article's blocks. Attributes set in a child block override those set by its parent article.
• Trickle's Completion Attribute may be changed from the default in Settings.
• (In the Adapt framework Trickle may also be added to course.json as a simple switch to enable/disable Trickle during development. Its attributes will not be inherited by its child elements.)

Attributes

Trickle (_trickle): The Trickle attributes group. It contains values for Enable Trickle, Scroll Duration, Scroll Automatically, Scroll To, Enable on Child Blocks, Button Attributes, and Step Locking Attributes.

Enable Trickle (_isEnabled): Turns on and off the Trickle extension. Can be set in articles.json and blocks.json (and in course.json in the Adapt framework) to disable Trickle where not required. Also useful during course development.

Scroll Duration (_scrollDuration): This number specifies the duration of the scroll animation in milliseconds.

Scroll Automatically (_autoScroll): If set to true, the page will scroll automatically to the destination specified in Scroll To when the button is clicked. The learner must manually scroll if this is set to false.

Scroll To (_scrollTo): This value determines the destination to which Trickle should scroll when the relevant step is unlocked. Acceptable values must be formulated according to one of the models listed below. The default is "@block +1".

• "@block +1" - Scroll forward to the next block.
• "@article +2" - Scroll forward two articles.
• ".className" - Scroll to the specified classname.
• "id" - Scroll to the given ID.

Enable on Child Blocks (_onChildren): Determines whether the Trickle settings should be applied to the article alone or if it should apply to its blocks. When set to true on an article, the article's Trickle settings do not apply to the article; rather, the settings act as the default Trickle settings for all the blocks contained by the article. When set to false, the settings act on the article itself. This attribute is ignored if set on a block.

Button Attributes (_button): The button that releases the lock on hidden elements is commonly called the Trickle button. This _button attributes group stores the properties for the Trickle button. It contains values for Enabled, Initial Visibility, Final Visibility, Full Width, Hide on Scroll, Custom Classes, Button Text, Final Button Text, and Trickle Plugin.

Enabled (_isEnabled): If set to false, no button is displayed, so step-locking is triggered by component completion only. The page will scroll to the specified destination if Scroll Automatically is set to true.

Initial Visibility (_styleBeforeCompletion): Determines whether the Trickle button is visible even while subsequent sections of the page remain inaccessible. Acceptable values are "hidden" and "visible".

Final Visibility (_styleAfterClick): Determines the properties of the Trickle button after it has been clicked. Acceptable values are "hidden", "disabled", and "scroll". "hidden" hides the button. "disabled" applies the "disabled" CSS class. The value "scroll" will cause the button to maintain its visibility allowing the user an alternative method for scrolling down the page by using the button (even after all sections have been revealed).

Full Width (_isFullWidth): Will position the button fixed to the bottom of the window. This option will force Enabled to be true in the Step Locking Attributes group. When Hide on Scroll is set to true, the button will fade-out when the learner scrolls up, away from the button.

Hide on Scroll (_autoHide): Will hide the button when it scrolls from view. Will show the button when it scrolls into view.

Custom Classes (_className): Will add a class to the button container. Available option: "trickle-round-arrow". "trickle-round-arrow" displays a round button with an arrow and no text instead of the classic square button with text.

Button Text (text): Defines the default button text.

Final Button Text (finalText): Defines the last item button text when set on the article with Enable on Child Blocks set to true.

Trickle Plugin (_component): Defines the Trickle plug-in which should handle the interaction. At present only "trickle-button" is available, but it is possible to create new plug-ins.

Step Locking Attributes (_stepLocking): Step locking (section hiding) attributes group contains values for Enabled, Completion Required, and Locked On Revisit.

Enabled (_isEnabled): Will allow Trickle to truncate the page at the step until the user is allowed to move forward.

Completion Required (_isCompletionRequired): Forces the user to complete the block/article before the step is unlocked. If the block/article is reset on a page revisit, the lock will be reapplied.

Locked On Revisit (_isLockedOnRevisit): On every page revisit the step will be relocked.

Completion Attribute (_completionAttribute): Defines which completion attribute is used to test when the trickle button should be displayed. By default this is _isInteractionComplete but can be changed to the core data attribute _isComplete.

Limitations

Accessibility on iOS < 8 is broken. Please use iOS 8+ if you want to have accessible trickle.