Interactive Slides

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

Defining steps

Defining conditions

Condition operators

Defining if tags

List of Conditions

Run conditions

IO Conditions

Blockly conditions

Editor conditions

DOM conditions

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 id 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 id 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 id 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 id 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 id 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 id 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 id 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>