General principles

The activity file should have the following layout:

                    

                    

                                

                        
                            

First side

...

Second side

...
...

Custom styles

Custom styles must be prefixed by "player" so that the custom styles do not interfere with the application styles

Slide show

The <slide-show> element has the following attributes:

  • id: Value displayed in the activity list.
    This value must be unique and is used by the application to associate the reports (made by users) to the activity.
  • author: Value displayed in the activity list.
  • description: Value displayed in the activity list.

The slide show is composed of different elements:

  • <chart-container> is a container for the chart elements
  • <slide> is a container for the slide content

In the snippet above, bootstap classes ("col-sm-6", "pull-right") are used to set the size of the elements to half the window width and pull the chart container to the right.

The slide element is used to define the content of the slides based on regular HTML elements as title <h1>, paragraph <p>, image <img>, ...

In addition to the regular html elements, some specific elements have been designed to mange questions, slide transitions (next/save buttons), mathematical expressions via MathJax and IOLab device configuration (code-block).

There are four types of question currently supported in IOLab : free-text, radio-button, check-box and upload-image questions.

All of them rely on a <content> tag which contains the question itself while the radio-button and check-box questions require in addition <item> tags container which contains answers choices.

Important note: the question attribute id is mandatory and must be unique over the slideshow: without it there is no way the answer can be saved.


Here is an example of free-test question:

                                    
                                        This is a free-text question
                                    
                                
This is a free-text question

A radio-button question:

                                    
                                        This is a radio-button question
                                        Answer A
                                        Answer B
                                        Answer C
                                    
                                
This is a radio-button question Answer A Answer B Answer C

A check-box question

                                    
                                        This is a check-box question
                                        Answer A
                                        Answer B
                                        Answer C
                                    
                                
This is a check-box question Answer A Answer B Answer C

Finally, we can ask the user to upload an image via the code

                                    
                                        Upload an image of the experiment setup
                                    
                                
Upload an image of the experiment setup

Two tag attributes can be used to make the question editable once a slide is saved:

  1. the global slide attribute editable-questions
  2. the specific question attribute editable
Here the questions are editable by default:
                                    
                                        
                                            This is an editable free-text question
                                        
                                        
                                            This is a NON editable free-text question
                                        
                                    
                                
Here the questions are not editable by default:
                                    
                                        
                                            This is an editable free-text question
                                        
                                        
                                            This is a NON editable free-text question
                                        
                                    
                                

In this last case, the editable-questions attribute is optional and can by omitted

Save this slide to activate the edition mode

The list of predefined buttons that can be inserted in a slide is

                            
                            
                            
                        

The action of these buttons is summarized in the following table

Btn attributeStop acquisitionSave slideGo to next slideDefault btn label
stop ✔︎ "Stop acquisition"
save ✔︎ ✔︎ "Save slide"
next ✔ ︎ ✔ ︎ ✔ ︎"Save & Go next"

Note that an optional attribute label can be used to specify a custom label for the button, as for example

                            
                        

Inline mathjax equation:

                            
                        

Display style mathjax equation:

inside a paragraph.

                            

The <code-block> element allows to define sequential commands to configure the IOLab player programmatically. Note that each command waits the end of the previous command to be executed.

The section Code-block commands below provides information about available commands. For example, we can reset the acquisition stack when entering in a new slide, then set the fixed configuration and show some sensor charts via the following code-block:

                            
                                
                                
                                
                            
                        

The <code-block> element accepts special attributes "show-sensor-selector" and "show-output-config" to display the sensor selector and the output configuration panel as in the regular IOLab acquisition mode:

                            
                                
                                
                            
                        

The code block commands are special directives or sub-elements of the <code-block> element that are used to configure the IOLab player.

                            
                        

This command makes the system ready to configure a new acquisition — It resets the hardware state and clears the chart list.

                            
                        

This command re-initializes the chart scale to the default value (similar to double click on the chart with zoom mode selected) and clears the range selection (similar to double click on the chart with analytics mode selected).

Prerequisite: "player-reset-acquisition" is required when player-set-fixed-configuration is called after a previous acquisition (ie not the first time).

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

                            
                        

This command sets a fixed configuration.

Here is the list of the available fixed configurations:

{{config.code}} - {{config.desc}}
Sensors: {{sensor.desc}}, {{sensor.sampleRate}}Hz [{{sensor.sensorKey}}]

Prerequisite: This command ("player-load-acquisition") must be executed after the command "player-set-fixed-configuration" and before the command "player-show-chart-sensor".

This command allows to load a template acquisition provided by the instructor.

                            
                        

The acquisition files (acquisitionID.raw and acquisitionID.bson as well as the corresponding calibration file) must be located in the directory named path_to_data at the root of the slide-show file.

An example of code block command could be :

                            
                        

where dataDir is the directory containing the acquisition files 9d0c9ebd-aefc-45bb-b04b-7071a2fd75ec.raw and 9d0c9ebd-aefc-45bb-b04b-7071a2fd75ec.bson, and the calibration file cal_0x000341_Accel.bson

Prerequisite: "player-set-fixed-configuration"

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

The player-show-chart-sensor allows to display charts from a fixed configuration. It is possible to show several charts in one command. For that, separate the code of the sensors by a space character. This command can also be used to hide sensors by prefixing the sensor code with exclamation mark "!".

                            
                        

The above example shows the chart for the sensor 1 (accelerometer) and for sensor 9 (wheel), displaying the first trace (position) and the third trace (acceleration) for sensor 9.

Note: Only sensor 9 (wheel) is split into several components, one for each physical unit (1/ position [m], 2/ velocity [m/s] and 3/ acceleration [m/s^2]).

Alternatively, the following command can be used to hide various components. In this example the chart for sensor 1 and sensor 9, component 1 is hidden:

                            
                        

Prerequisite: "player-set-fixed-configuration"

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

The player-setup-param-plot allows to setup parametric plots for sensors available in the selected fixed configuration.

Once the parametric plots are setup, a toggle button will appear in the nav bar allowing the user to switch from the chart mode to the parametric plot mode.

Note that the parametric plots will appear only once the user selects the parametric plot mode from the toggle button.

                            
                        

Prerequisite: "player-show-chart-sensor"

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

This command allows to override the default value for the y-axis.

                                  
                              
                        

The range should be numeric with the smallest value first.

Prerequisite: "player-show-chart-sensor"

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

This command allows to hide one or several traces of multidimensional sensors as the accelerometer

                                  
                                
                               
                        

Prefixing the trace index with exclamation mark "!", will change the action from hide to show and vice-versa.

Additionaly, the player-show-trace command allows to show trace(s) previously hidden (the exclamation prefix also applies):

                                  
                                
                               
                        

Prerequisite: "player-show-chart-sensor"

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

                                  
                              
                        

The data smoothing value must be an odd number (1, 3, 5, ...). This value gives the number of data points used to make the average.

Prerequisite: "player-show-chart-sensor"

Optional attribute: the attribute "remote" specifies the remote number (1 or 2) on which the command applies. If not specified, the command applies to the remote 1.

                            
                        

This command reverses the y-axis for the specified sensor(s) and components. To reset the y-axis setting to default value, prefix the sensor code with exclamation mark "!".

Prerequisite: "player-show-chart-sensor"

                            
                        

This command specifies the duration, in seconds, of the subsequent acquisitions.

The chart time range will be set automatically to the duration specified by this command.

Inserted in a code block the following code will start an acquisition.

A fixed configuration should be set and a sensor should be shown prior to doing this.

                            
                        

An optional attribute "duration" can be used to stop the acquisition after the specified duration (in seconds):

                            
                        

This command has the same action as clicking on the "Add run" button — It allows to add an acquisition run to the current chart(s).

Notice that the older runs will be re-drawn in a lighter color once the new run acquisition has started.

                            
                        

This command can be used on the last slide to save it without the need of a button

                            
                        

Scrollable slide(s)

The slide content can be made scrollable globally (for all slides) by appending the "scrollable-slides" class or attribute to the <slide-show> element, or for each slide individually by appending the "scrollable" class or attribute to the <slide> element.