HTML scaffolding modules are the building blocks to structure your HTML pages and elements.

These modules are configured per project in the project.json under the modules node. Each module is a key pair object where the key is your own unique name for this module/page/element. id would be the name of the predefined modules that are detailed here in the tutorial in the form of basic modules, complex modules, and IHA Modules.

"m-my-unique-module-name" : {
	"id": "name-of-predefined-module"
}

"Most" modules have some common properties:

• id - This is the name of a predefined module of which the preceeding properties will be applied to.
• class - This is a classname that will be applied to this element.
• containerId - This is optional. It is used as the id attribute of the markup.
• data - This consists of key/value pairs of data attributes that will be added to this element.

  • "id": "myId" - Will appear in the mark up as "data-id='myId'".

  • "lang-copy-id" - Is an internal data attribute. The value applied to this attribute is used in a look up in the langCopy.json under the languageCopy node. This is used to change the copy based on the current language.

    • "lang-copy-id": "myElement" - The langCopy.json will look like this:

    "languageCopy": {
    	"myElement" : {
    		"_English": "Hello World",
    		"_Spanish": "Hola Mundo"
    	}
    }
    

• modules - This is an array of additional nested modules.

IHA has some additional common properties. All page have the option to display a title and subtitle.

iha-template-page-static

Any type of page module (predefined module containing the word "page") must be used to identify a page.

The modules that are added to this page are placed in a container. This container is attached to a feature for using ASL language. When ASL is engaged, and the avatar is speaking, this container partially fades out to help the visibility of the avatar's hands.

{
	"id": "iha-template-page-static",
	"class": "my-class-name",
	"event": "MY_PAGE_EVENT_STRING",
	"header": "optional_header_module",
	"footer": "optional_footer_module",
	"title": {
		"copy": "A Page",
		"class": "l-title",
		"data": {
		}
	},
	"subtitle": {
		"copy": "An example of a page.",
		"class": "l-subtitle"
	},
	"data": {		
	},
	"modules": []	
}

iha-template-page-presentation

Any type of page module (predefined module containing the word "page") must be used to identify a page.

This module makes it easy to create slide show behaviors. There are built in buttons for home, next and back. These buttons trigger their associated events: EVENT_IHA_PRESENTATION_HOME, EVENT_IHA_PRESENTATION_NEXT, EVENT_IHA_PRESENTATION_BACK.

The presentation node is where the configuration takes place. filePrefix is the filename excluding the slide number. The slide count starts at "1", so the first slide here would be "slide_1.png". The file format used is PNG.

Within the folder you will need to add a folder for each language ID. So for example there should be a folder "_English". Changing languages, changes for folder from where the slides are pulled from.

Under pageConfig you can assaign particular slides for having unique behavior or unique content. In this example slide 5 will also add a string to display along with the slide.

The live presentation object can be accessed through window.oIha.presentation.

{
	"id": "iha-template-page-presentation",
	"class": "my-class-name",
	"event": "MY_PAGE_EVENT_STRING",
	"header": "optional_header_module",
	"footer": "optional_footer_module",
	"presentation": {
		"pageCount": 10,
		"folder": "content/images/Pres1/",
		"filePrefix": "slide_",
		"pageConfig": {
			"slide_5": {
				"id": "m-string",
				"class": "slide5",
				"copy": "Just a reminder that this is slide 5"
			}
		}
	},
	"title": {
		"copy": "A Presentation",
		"class": "l-title",
		"data": {
		}
	},
	"subtitle": {
		"copy": "An example of presentation behavior.",
		"class": "l-subtitle"
	},
	"data": {		
	},
	"modules": []	
}

iha-template-page-menu

Any type of page module (predefined module containing the word "page") must be used to identify a page.

This module makes it easier to create a main menu. The buttons node is an array where you list button module objects.

{
	"id": "iha-template-page-static",
	"class": "my-class-name",
	"event": "MY_PAGE_EVENT_STRING",
	"header": "optional_header_module",
	"footer": "optional_footer_module",
	"buttons": [
		{
			"id": "m-button",
			"class": "menu-btn-1",
			"event": "EVENT_GO_TO_PAGE_1",
			"data": {
				"lang-copy-id": "menu_btn_1"
			},
			"modules": []	
		},

		{
			"id": "m-button",
			"class": "menu-btn-1",
			"event": "EVENT_GO_TO_PAGE_1",
			"data": {
				"lang-copy-id": "menu_btn_1"
			},
			"modules": []	
		}
	],
	"title": {
		"copy": "A Main Menu",
		"class": "l-title",
		"data": {
		}
	},
	"subtitle": {
		"copy": "An example of a main menu.",
		"class": "l-subtitle"
	},
	"data": {		
	},
	"modules": []	
}