Simulation Development


Slides are much like an HTML page. In addition to standard web elements, you can also declare:

  • Hammer Widgets
  • Hammer Virtuals
  • Hammer Actions
  • Hammer Events
  • Custom Scripts
  • Custom Styles

See definitions for an understanding of this terminology.

Slides are widget containers. Slides not only can contain other widgets, they can contain other slides; because a slide is a widget. Popups, tooltips and other views can each be represented by slides. Let's take an application, like a word document editor to see how we might break it down into slides.

In this example we can see there exists four slide containers, though in a real-world example there would be more. The slide application is our base slide. It contains the other slides. Each of the slide containers can swap their view areas with other content without refreshing the page. For example, the "slide toolbar" will have many content items representing its display in order to represent the selected tab. Same with the document area.

The popup grabs a slide and displays it in as a floating widget on the screen. It should be possible to simulate most environments based on this concept.

Exam Workflow

Currently most slides contain a screenshot as a static background that represents that portion of the view. Widgets such as hotspots (buttons without a display) are then placed on top of the screenshot to simulate the real environment. By doing this we cut down on the amount of strings that need to be translated into different languages.

Slide with screenshot and hotspots

timer Exercise: Adding content to a slide

In this exercise, you will add some content to an empty slide.

Launch in your browser http://localhost:8080/sandbox/#/tutorials/slide/slide_start. It should open a page with "Slide Tutorial" displayed. The URL indicates where this slide is relative to your slides folder in the sandbox. We can see here that this slide is located in sandbox/slides/tutorials/slide/slide_start.html. The slides directory is the default directory for our slides.

folder sandbox
folder slides
folder tutorials
folder slide
insert_drive_file slide_start.html

Open this file in your project. The outer tag for your slides is <content>. You will also notice an XML Namespace declaration. This is used internally by Hammer to determine the type of content this file represents. The namespace for a slide is


Your exam will load many HTML and XML files. The only way to differentiate one file from another is define an internal namespace. In previous versions of Hammer we also used these namespaces to auto-complete widgets, actions and other behaviors. We have not currently implemented auto-completion in this version of Hammer, but it is setup to if needed at a later time.

The content area supports your standard HTML as well as Hammer and Angular components. To see the content change, add the following tag, below the header:

<div>Hello, world!</div>

Like so:

<content xmlns:h="" class="hammer-sim">
    <h3>Slide tutorial</h3>
    <div>Hello, world!</div>

Open http://localhost:8080/sandbox/#/tutorials/slide/slide_finish to see end result.

Your slide should not display the following:

Slide tutorial

Hello, world!