Simulation Development

Mixins

A h:mixin is a partial DOM element that is included into a slide. Often, there are times when the same set of components will be used throughout the exam. Take the header of a question...

Rather than include all these components in each slide, you can create a h:mixin. It is similar to building up a widget, but this can be done at anytime without any additional preparation or compiling. Mixins can contain both virtuals and widgets. It is parsed and inserted prior to the HTML being inserted into the DOM. It supports all the behaviors we have used. Like a widget, changes can be made and all files including the mixin will update.

You include a mixin like so:

<h:mixin url="PATH_TO_MIXIN" />

Typically your mixins will exist in the mixins folder.

timer Exercise: Include the Toolbar Mixin

In this exercise, you will include the toolbar mixin.

Launch in your browser http://localhost:8080/sandbox/#/tutorials/mixins/mixins_start. It should open a page with "Mixins Tutorial" displayed.

Open sandbox/slides/tutorials/mixins/mixins_start.html in seed-exam in your editor.

We will include sandbox/mixins/toolbar.html with the following code.

<h:mixin url="mixins/toolbar"/>

Refresh the page and you will now see the toolbar as in the image above.