Interactive Slides
This document is out of date. Please take a look at it in Confluence.
Interactive slides provide structure and instant feedback for students who need more support. It encourages reading through the notes by visually rewarding students for completing the work on each slide. Read more about the pedagogical benefits here.
The best way to understand the feature is to try it out completing the steps as instructed in the slide.
Table of Contents
Creating an interactive slide
You create an interactive slide using custom tags. These tags do various bits of work.
The two most important tags are:
grok-step - A step that a student can complete
grok-condition - A condition that must be completed for a step to pass
Here is an example, using the first slide in newbies:
#markdown
**Follow the steps to write your first program:**
<grok-step>
<grok-condition type="blocks-complete" eg="bk-print-hello-world"></grok-condition>
Drag the <bk class="str">text</bk> into the hole in the <bk class="io">print</bk> block.
</grok-step>
```eg:bk-print-hello-world;lang:blockly;
<blockly>
<block id="1" type="io_print1" x="10" y="10" inline="true" movable="false" deletable="false">
<value name="ANY0">
</value>
</block>
<block id="2" type="text" x="150" y="15" inline="true" deletable="false">
<field name="TEXT">Hello, World!</field>
</block>
</blockly>
```
The <bk class="io">print</bk> block is an **instruction** for the computer to follow.
The <bk class="str">text</bk> block contains the message to show.
<grok-step>
<grok-condition type="ran" eg="bk-print-hello-world"></grok-condition>
Click <span class="icon-play4" style="font-size: 16px"></span> to run the program. It prints the message!
</grok-step>
<grok-step>
<grok-condition type="field-not-match" eg="bk-print-hello-world" block="2" field="TEXT" regex="Hello, World!"></grok-condition>
Change the message by clicking on <bk class="str"><bk class="inner">Hello, World!</bk></bk>.
</grok-step>
<grok-step>
<grok-condition sequence>
<grok-condition type="field-not-match" eg="bk-print-hello-world" block="2" field="TEXT" regex="Hello, World!"></grok-condition>
<grok-condition type="ran" eg="bk-print-hello-world"></grok-condition>
</grok-condition>
Run it to print *your* message.
</grok-step>
<grok-if show>
<grok-condition sequence>
<grok-condition type="field-not-match" eg="bk-print-hello-world" block="2" field="TEXT" regex="Hello, World!"></grok-condition>
<grok-condition type="ran" eg="bk-print-hello-world"></grok-condition>
</grok-condition>
### Congratulations, you have written your first program!
</grok-if>
Using Markdown
If you use Markdown along with Interactive slides be aware that Markdown may alter your HTML. Make sure you leave a blank line around each side of the HTML to allow markdown to create a p tag. If you use four spaces to indent, Markdown will interpret this as a code block.
Defining Steps
A step is created with a grok-step tag. You can wrap it around any html or markdown.
If you are wrapping it around markdown you need to leave a blank line around each side of the HTML to create a p tag.
A grok-step is dependent on any nested grok-condition elements. e.g.
<grok-step> <grok-condition type="ran" eg="bk-print-hello-world"></grok-condition> I am conditional on the `bk-print-hello-world` example having been run. </grok-step>
Defining Conditions
A condition is created with a grok-condition tag. Conditions will not be displayed in the document. Self-closing is unfortunately not supported. Here is an example:
<grok-condition ident="hello-world-has-run" type="ran" eg="bk-print-hello-world"></grok-condition>
ident - (optional) the identifier for this condition, used in combination with grok-step
type - (required) the type of the condition we are checking for
The rest of the attributes are defined per condition.
Invalid conditions will be logged to the console. So watch your console to see if you've messed stuff up.
Condition Operators
It's possible to create "operator" conditions which combine multiple conditions. For example, to require a series of actions to be completed in order you would use a sequence .
These are defined by nesting within special grok-condition elements. Here is an example:
<grok-condition sequence> <grok-condition type="field-not-match" eg="bk-print-hello-world" block="2" field="TEXT" regex="Hello, World!"></grok-condition> <grok-condition type="ran" eg="bk-print-hello-world"></grok-condition> </grok-condition>
A sequence requires each condition to be passed one after another.
List of Condition Operations
sequence
<grok-condition sequence></grok-condition>
Requires each sub-condition to be completed in order.
and
<grok-condition and></grok-condition>
Requires all sub-conditions to be completed, order not important. This is the default behaviour of ungrouped conditions.
or
<grok-condition or></grok-condition>
Requires any sub-conditions to be completed.
Defining If Tags
When you want to mark up a block for special behaviour without a step you can use grok-if . E.g.
<grok-if show> <grok-condition sequence> <grok-condition type="field-not-match" eg="bk-print-hello-world" block="2" field="TEXT" regex="Hello, World!"></grok-condition> <grok-condition type="ran" eg="bk-print-hello-world"></grok-condition> </grok-condition> ### Congratulations, you have written your first program! </grok-if>
Different attributes on the grok-if element control its behaviour.
show
<grok-if show></grok-if>
When all the conditions inside this grok-if are met it will show.
flash
<grok-if flash></grok-if>
When all the conditions inside this grok-if are met it will flash.
hide
<grok-if hide></grok-if>
When all the conditions inside this grok-if are met it will hide.
List of available Conditions
Following is a list of the available conditions, their names and their extra attributes.
Run conditions
The following conditions relate to running code. They use these attributes:
type - (required) the type of the condition we are checking for
eg - (optional) the eg-id of the editor. Use problem for a problem editor (pane editor). Use any for any editor except the problem. Defaults to any .
running
<grok-condition type="running" eg="some-eg-id"></grok-condition>
Triggered when the code starts running.
ran
<grok-condition type="ran" eg="some-eg-id"></grok-condition>
Triggered when the code finishes running. To sequence multiple ran conditions, interleave with running conditions.
marking
<grok-condition type="marking" eg="some-eg-id"></grok-condition>
Triggered when the code starts marking.
marked
<grok-condition type="marked" eg="some-eg-id"></grok-condition>
Triggered when the code finishes marking.
previewed
<grok-condition type="previewed" eg="some-eg-id"></grok-condition>
Triggered when a JS preview is viewed.
IO conditions
The following conditions relate to student's IO while writing code. They use these attributes:
type - (required) the type of the condition we are checking for
eg - (optional) the eg-id of the editor. Use problem for a problem editor (pane editor). Use any for any editor except the problem. Defaults to any .
These tests are run each time the terminal provides output to the student or the student gives input to the terminal.
io-match
regex - (required) the regex to match against (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
<grok-condition type="io-match" eg="some-eg-id" regex="some-regex"></grok-condition>
Triggered when the IO matches this regex.
io-not-match
<grok-condition type="io-not-match" eg="some-eg-id" regex="some-regex"></grok-condition>
Triggered when the IO does not match this regex.
Blockly conditions
The following conditions relate to blockly workspaces. They use these attributes:
type - (required) the type of the condition we are checking for
eg - (optional) the eg-id of the editor. Use the problem slug for the problem editor (pane editor). Use any for any editor except the problem. Defaults to any .
hole - this is a "value" or a "statement" placeholder (empty puzzle piece or statement block)
child - this is a block directly inside a statement
descendent - this is a block nested anywhere inside a statement
blocks-complete
<grok-condition type="blocks-complete" eg="some-eg-id"></grok-condition>
Triggered when all block holes have been filled (and a change is made).
blocks-not-complete
<grok-condition type="blocks-not-complete" eg="some-eg-id"></grok-condition>
Triggered when all block holes have not been filled (and a change is made).
blocks-connected
<grok-condition type="blocks-connected" eg="some-eg-id"></grok-condition>
Triggered when all blocks are connected (and a change is made).
blocks-not-connected
<grok-condition type="blocks-not-connected" eg="some-eg-id"></grok-condition>
Triggered when all blocks are not connected (and a change is made).
has-blocks
<grok-condition type="has-blocks" eg="some-eg-id"></grok-condition>
Triggered when the workspace has blocks (and a change is made).
has-no-blocks
<grok-condition type="has-no-blocks" eg="some-eg-id"></grok-condition>
Triggered when the workspace does not have blocks (and a change is made).
field-match
block - (required) the block id
field - (required) the field name in the block
regex - (required) the regular expression to check (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
<grok-condition type="field-match" eg="some-eg-id" block="2" field="TEXT" regex="some.*regex"></grok-condition>
Triggered when the field within a block matches the regex. Note: fields that contain variables match against the variable id, not the text of the variable.
field-not-match
block - (required) the block id
field - (required) the field name in the block
regex - (required) the regular expression to check (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
<grok-condition type="field-not-match" eg="some-eg-id" block="2" field="TEXT" regex="some.regex"></grok-condition>
Triggered when the field within a block does not match the regex. Note: fields that contain variables match against the variable id, not the text of the variable.
hole-empty
block - (required) the block id
hole - (required) the name of the block hole
<grok-condition type="hole-empty" eg="some-eg-id" block="2" hole="ANY0"></grok-condition>
Triggered when the hole in a block is empty.
hole-filled
block - (required) the block id
hole - (required) the name of the block hole
<grok-condition type="hole-filled" eg="some-eg-id" block="2" hole="ANY0"></grok-condition>
Triggered when the hole in a block is filled.
hole-is
block - (required) the block id
hole - (required) the name of the block hole
filler - (required) the block id filling, can be a space-seperated list of valid options
<grok-condition type="hole-is" eg="some-eg-id" block="2" hole="ANY0" filler="3 5"></grok-condition>
Triggered when the hole in a block is filled by a particular block
hole-is-not
block - (required) the block id
hole - (required) the name of the block hole
filler - (required) the block id filling, can be a space-seperated list of valid options
<grok-condition type="hole-is-not" eg="some-eg-id" block="2" hole="ANY0" filler="3 5"></grok-condition>
Triggered when the hole in a block is not filled by a particular block
a-child-is
block - (required) the id of the parent block
child - (required) the id of the child block, can be a space-seperated list of valid options
<grok-condition type="a-child-is" block="2" child="3 5"></grok-condition>
Triggered when the block has a child of child-id . Per blockly documentation.
a-child-is-not
block - (required) the id of the parent block
child - (required) the id of the child block, can be a space-seperated list of valid options
<grok-condition type="a-child-is-not" block="2" child="3 5"></grok-condition>
Triggered when the block does not have a child of child-id . Per blockly documentation.
next-is
block - (required) the id of the parent block
next - (required) the id of the next block, can be a space-seperated list of valid options
<grok-condition type="next-is" block="2" next="3 5"></grok-condition>
Triggered when the block has a next block of next-id . Per blockly documentation.
next-is-not
block - (required) the id of the parent block
next - (required) the id of the next block, can be a space-seperated list of valid options
<grok-condition type="next-is-not" block="2" next="3 5"></grok-condition>
Triggered when the block does not have a next block of next-id . Per blockly documentation.
descendant-is
block - (required) the id of the parent block
descendant - (required) the id of the descendant block, can be a space-seperated list of valid options
<grok-condition type="descendant-is" block="2" descendant="3 5"></grok-condition>
Triggered when the block has a descendant of descendant-id . Per blockly documentation.
descendant-is-not
block - (required) the id of the parent block
descendant - (required) the id of the descendant block
<grok-condition type="descendant-is-not" block="2" descendant="3 5"></grok-condition>
Triggered when the block does not have a descendant of descendant-id . Per blockly documentation.
count-type
block-type - (required) the type of the parent block
count - (optional) number of this type, defaults to 1
<grok-condition type="count-type" block-type="some_block_type"></grok-condition>
Triggered when the workspace has count number of blocks of type block-type .
count-type-not
block-type - (required) the type of the parent block
count - (optional) number of this type, defaults to 1
<grok-condition type="count-type-not" block-type="some_block_type"></grok-condition>
Triggered when the workspace doesn't have count number of blocks of type block-type .
count-type-field-match
block-type - (required) the type of the parent block
field - (required) the field to check
regex - (required) the regex to check against the field value (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
count - (optional) number of this type which match, defaults to 1
<grok-condition type="count-type-field-match" block-type="some_block_type" field="FIELD_NAME" regex="some-regex" count="5"></grok-condition>
Triggered when the workspace has the count number of blocks with a field that matches the regex.
count-type-field-match-not
block-type - (required) the type of the parent block
field - (required) the field to check
regex - (required) the regex to check against the field value (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
count - (optional) number of this type which match, defaults to 1
<grok-condition type="count-type-field-match-not" block-type="some_block_type" field="FIELD_NAME" regex="some-regex" count="5"></grok-condition>
Triggered when the workspace does not have the count number of blocks with a field that matches the regex.
hole-filled-by-type
block - (required) the block id
hole - (required) the name of the block hole
block-type - (required) the id of the parent block
<grok-condition type="hole-filled-by-type" block="2" hole="ANY0" block-type="some_block_type"></grok-condition>
Triggered when the hole in the block is filled by a block of the given type.
hole-filled-by-type-not
block - (required) the block id
hole - (required) the name of the block hole
block-type - (required) the type of the parent block
<grok-condition type="hole-filled-by-type-not" block="2" hole="ANY0" block-type="some_block_type"></grok-condition>
Triggered when the hole in the block is filled by a block that's not of the given type. Note that the hole must be filled.
hole-filled-by-type-field-match
block - (required) the block id
hole - (required) the name of the block hole
block-type - (required) the type of the parent block
field - (required) the field to check
regex - (required) the regex to check against the field value (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
<grok-condition type="hole-filled-by-type-field-match" block="2" hole="ANY0" block-type="some_block_type" field="FIELD_NAME" regex="some-regex"></grok-condition>
Triggered when the hole in the block is filled by a block of some type which has a field matching the regex.
hole-filled-by-type-field-match-not
block - (required) the block id
hole - (required) the name of the block hole
block-type - (required) the type of the parent block
field - (required) the field to check
regex - (required) the regex to check against the field value (note: some browsers may not support all regex features)
options - (optional) the options to use in the match per MDN
<grok-condition type="hole-filled-by-type-field-match-not" block="2" hole="ANY0" block-type="some_block_type" field="FIELD_NAME" regex="some-regex"></grok-condition>
Triggered when the hole in the block is filled by any block other than one which matches block-type AND has the field that matches the regex. Note that the hole must be filled.
count-type-with-descendant-type
block-type - (required) the type of the parent block
descendant-type - (required) the type of the descendant block to check for
count - (optional) number of blocks that have a descendant of the right type to check for, defaults to 1
<grok-condition type="count-type-with-descendant-type" block-type="some_block_type" descendant-type="some_other_block_type" count="5"></grok-condition>
Triggered when the workspace has the count number of blocks of type block-type with a descendant of type descendant-type .
A descendant is any block that comes after the parent, no matter how many blocks are between.
count-type-with-descendant-type-not
block-type - (required) the type of the parent block
descendant-type - (required) the type of the descendant block to check for
count - (optional) number of blocks that have a descendant of the right type to check for, defaults to 1
<grok-condition type="count-type-with-descendant-type-not" block-type="some_block_type" descendant-type="some_other_block_type" count="5"></grok-condition>
Triggered when the workspace doesn't have count number of blocks of type block-type with a descendant of type descendant-type .
A descendant is any block that comes after the parent, no matter how many blocks are between.
count-type-with-child-type
block-type - (required) the type of the parent block
child-type - (required) the type of the child block to check for
count - (optional) number of blocks that have a child of the right type to check for, defaults to 1
<grok-condition type="count-type-with-child-type" block-type="some_block_type" child-type="some_other_block_type" count="3"></grok-condition>
Triggered when the workspace has the count number of blocks of type block-type with a child of type child-type .
A child is any block that attaches directly to the parent block.
count-type-with-child-type-not
block-type - (required) the type of the parent block
child-type - (required) the type of the child block to check for
count - (optional) number of blocks that have a child of the right type to check for, defaults to 1
<grok-condition type="count-type-with-child-type-not" block-type="some_block_type" child-type="some_other_block_type" count="3"></grok-condition>
Triggered when the workspace doesn't have count number of blocks of type block-type with a child of type child-type .
A child is any block that attaches directly to the parent block.
editor-match[-not]
The name of this is for compatibility reasons with the 'editor' conditions so that it's easier to port steps from code to Blockly. It will act in the same way as the editor's 'editor-match', except that path is not supported. Note that will match generated code even if the code is not valid (i.e. the blockly blocks are not all filled and hence not displayed in the output).
regex
Pattern to match to the specified attribute. (note: some browsers may not support all regex features)
options
Regex flags. Reference
Condition is met when the blockly generated code matches/does not match the given regex.
<grok-condition eg="problem" type="editor-match" regex="abc123"></grok-condition> <grok-condition eg="problem" type="editor-match-not" regex="abc123"></grok-condition>
Notes
To match whitespace over multiple lines, use [^]* ("not the empty set" zero or more times).
Browser compatibility
Some regex options are not available in all browsers (for example dot all). Make sure you don't use options that are browser specific.
Editor conditions
editor-changed
path
Optional. The path of the file to watch (defaults to main file).
Condition is met when the editor of the specified example changes.
<grok-condition eg="problem" type="editor-changed"></grok-condition> <grok-condition eg="problem" type="editor-changed" path="other.css"></grok-condition>
editor-empty[-not]
path
Optional. The path of the file to watch (defaults to main file).
Condition is met when the editor of the specified example is empty/not empty.
<grok-condition eg="problem" type="editor-empty"></grok-condition> <grok-condition eg="problem" type="editor-empty-not"></grok-condition>
editor-match[-not]
path
Optional. The path of the file to watch (defaults to main file).
regex
Pattern to match to the specified attribute. (note: some browsers may not support all regex features)
options
Regex flags. Reference
Condition is met when the editor of the specified example matches/does not match the given regex.
<grok-condition eg="problem" type="editor-match" regex="abc123"></grok-condition> <grok-condition eg="problem" type="editor-match-not" regex="abc123"></grok-condition>
Notes
To match whitespace over multiple lines, use [^]* ("not the empty set" zero or more times).
Browser compatibility
Some regex options are not available in all browsers (for example dot all). Make sure you don't use options that are browser specific.
DOM conditions
DOM conditions are limited to the inside the slide container (ie. can't access the learning interface itself).
element-triggered
selector
The target element.
event
The event to listen to.
Condition is met when the specified event is triggered on the specified element.
<grok-condition type="element-triggered" selector="#button" event="click"></grok-condition>
element-value-matches
selector
The target element.
regex
Pattern to match to the element's value. (note: some browsers may not support all regex features)
options
Optional. Regex flags. Reference
Condition is checked when input or change events are triggered on the specified element.
Condition is met when the value of the specified element matches the regex.
<grok-condition type="element-value-matches" selector="#input" regex="abc123"></grok-condition>
element-attribute-matches-after-event
selector
The target element.
event
The event to listen to.
attribute
The attribute to compare.
regex
Pattern to match to the specified attribute. (note: some browsers may not support all regex features)
options
Optional. Regex flags. Reference
Condition is met when the specified event is triggered on the specified element, and the value of the specified attribute matches the regex.
<grok-condition type="element-attribute-matches-after-event" selector="#input" event="click" attribute="value" regex="abc123"></grok-condition>
Checkbox inputs require a boolean.
<grok-condition type="element-attribute-matches-after-event" selector="#check" event="click" attribute="checked" regex="true"></grok-condition>
There appear to be issues with this. See DEV-743 for more details.