<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Webpack bundle</title><script>var EM = { trigger: function() {} };</script></head><body onload="parent.postMessage({name: 'reportHandlebarsHTMLFragmentLoaded', content: document.body.innerHTML, ids: ['text','imagestatic','button','video2','imagehotspot','filmstrip','sfl','countdown-timer','mcq','accordion','menubutton']}, '*');"><div id="bundleWrapper"><script id="text" type="text/x-handlebars-template">
		{{#if aiHelper}}
			<section
				id="textAsset_{{domId}}_WrapperL"
				style='{{bgFillStyle}}'
				class="assetWrapperC textAssetWrapperC {{importedStyle}} {{alignment}} {{bgFillClass}} {{aiHelperClass}}"
			>
				<h3 data-bind="gomotext: customTitle" class="h3--margin aiHelper__title">{{{customTitle}}}</h3>
				<p data-bind="gomotext: strContent" class="aiHelper__content">{{{textContent}}}</p>
			</section>
		{{else}}
			{{#if wrapContent}}
				<div
					id="textAsset_{{domId}}_WrapperL"
					style='background-color:transparent;'
					{{#if role}}
						role='{{role}}'
						aria-level='{{headingLevel}}'
					{{/if}}
					class="assetWrapperC textAssetWrapperC {{importedStyle}} {{alignment}} {{bgFillClass}} {{instructionText}}"
				>
					<span data-bind="gomotext: strContent" style='{{bgFillStyle}}'>{{{textContent}}}</span>
				</div>
			{{else}}
				<div
					id="textAsset_{{domId}}_WrapperL"
					style='{{bgFillStyle}}'
					{{#if role}}
						role='{{role}}'
						aria-level='{{headingLevel}}'
					{{/if}}
					data-bind="gomotext: strContent" class="assetWrapperC textAssetWrapperC {{importedStyle}} {{alignment}} {{bgFillClass}} {{instructionText}}"
				>{{{textContent}}}</div>
			{{/if}}
		{{/if}}
	</script><script id="imagestatic" type="text/x-handlebars-template">
			<div
				id="imagestaticAsset_{{domId}}_WrapperL"
				class="assetWrapperC imagestaticAssetWrapperC nonSettingsElementC {{strImageAlignment}}_AlignedImageC"
			>
				<img
					src="resources/{{objNormalSrc.decodedSrc}}"
					title="{{{objNormalSrc.strAltText}}}"
					alt="{{{objNormalSrc.strAltText}}}"
					class="imageAssetC"
					data-bind="attr: { alt:renderImage.strAltText, title:renderImage.strAltText, src:renderImage.strSrc}"
				/>
			</div>
    </script><script id="button" type="text/x-handlebars-template">
      {{#if objIconImageFilename.decodedSrc}}
        
        <div
          id='buttonAsset_{{domId}}_WrapperL'
          class='assetWrapperC buttonAssetWrapperC {{strAlignment}}C'
        >
          <button
            type='button'
            class='buttonC btn btn-default {{buttonStyle}} {{enabledClassname}}'
          >
            <img
              src='{{objIconImageFilename.decodedSrc}}'
              data-bind='attr: {src:renderImage.strSrc}'
            />
            <span data-bind='gomotext: formattedLabel'>
              {{{formattedLabel}}}
            </span>
          </button>
        </div>
      {{else}}
        
        <div id='buttonAsset_{{domId}}_WrapperL' class='assetWrapperC buttonAssetWrapperC {{strAlignment}}C'>
          <button
            type='button'
            class='buttonC btn btn-default {{buttonStyle}} {{enabledClassname}}'
          >
            <span data-bind='gomotext: formattedLabel'>
              {{{formattedLabel}}}
            </span>
          </button>
        </div>
      {{/if}}
    </script><script id="video2" type="text/x-handlebars-template">

		{{#if htmlVideoMode}}
			<div id="video2Asset_{{domId}}_WrapperL" class="assetWrapperC videoAssetWrapperC clearfix">
				<video class="video-js vjs-default-skin{{#unless isDesktopMode}} vjs-hidden-controls-skin{{/unless}} gomoVideoElement"
					controls preload="none" {{#if showThumbnail}}poster="{{thumbnailSrc}}"{{/if}}>
					<source src="{{#if showFallbackVideo}}{{showFallbackVideo}}{{else}}{{videoSrc}}{{/if}}" type='video/{{videoType}}' />
					{{#if hasSingleSubtitle}}
						<track kind="subtitles" src="{{subtitlesSrc}}" srclang="{{currentLanguageCode}}" label="{{currentLanguageTitle}}" />
					{{/if}}
					{{#if hasLanguageSubtitles}}
						{{#each objLanguageSubtitles}}
							{{#if subTitlesSrcExists}}
								<track kind="subtitles" src="{{subTitlesSrc}}" srclang="{{languageCode}}" label="{{languageTitle}}" />
							{{/if}}
						{{/each}}
					{{/if}}
				</video>
				{{#if showTranscript}}
					<div
						id="{{domId}}TranscriptContentL"
						class="videoTranscriptC hiddenVideoTranscriptC"
						aria-hidden="true"
						aria-labelledby='{{domId}}TranscriptButtonL'
					>
						<div class="scrollMaskingWrapperC checkScrollingC videoTranscriptWrapper">
							<div class="scrollWrapperC">
								<div
									id="{{domId}}TranscriptContentWrapperL"
									class="videoTranscriptContentWrapperC"
									data-bind="gomotext: objVideoData.strTranscriptText"
								>
								{{{transcriptContent}}}</div>
							</div>
						</div>
					</div>
					<span data-bind="disableBindings: true" class="videoTranscriptButtonWrapper">
						<a
							id="{{domId}}TranscriptButtonL"
							class="showTranscriptButtonC localisationWrapper"
							href="?still"
							onclick="return false"
							title="LOCALISED_TRANSLATION"
							data-bind="attr: { title:VIDEO2_TRANSCRIPT_BUTTON_TEXT_SUBSCREEN}"
							aria-controls='{{domId}}TranscriptContentL'
							aria-expanded='false'
							role="button"
						>
						<span data-bind="gomotext: VIDEO2_TRANSCRIPT_BUTTON_TEXT_SUBSCREEN">LOCALISED_TRANSLATION</span></a>
					</span>
				{{/if}}
			</div>
		{{/if}}

		{{#if thumbnailMode}}
			<div id="video2Asset_{{domId}}_WrapperL" class="assetWrapperC videoAssetWrapperC clearfix">
				<a href="?still" onclick="return false" class="videoThumbInPageC {{#if defaultThumbnail}}defaultThumbnail{{/if}} vjs-default-skin vjs-paused">
					{{#if showThumbnail}}
						<img id="videoThumb{{domId}}L" src="{{thumbnailSrc}}" alt="{{thumbnailAltText}}"/>
					{{/if}}
					<div class="vjs-big-play-button" role="button" aria-live="polite" tabindex="0" aria-label="play video"><span aria-hidden="true"></span></div>
				</a>
				{{#if showTranscript}}
					<div
						id="{{domId}}TranscriptContentL"
						class="videoTranscriptC hiddenVideoTranscriptC"
						aria-hidden="true"
						aria-labelledby='{{domId}}TranscriptButtonL'
					>
						<div class="scrollMaskingWrapperC checkScrollingC videoTranscriptWrapper">
							<div class="scrollWrapperC">
								<div
									id="{{domId}}TranscriptContentWrapperL"
									class="videoTranscriptContentWrapperC"
									data-bind="gomotext: objVideoData.strTranscriptText"
								>
								{{{transcriptContent}}}</div>
							</div>
						</div>
					</div>
					<span data-bind="disableBindings: true" class="videoTranscriptButtonWrapper">
						<a
							id="{{domId}}TranscriptButtonL"
							class="showTranscriptButtonC localisationWrapper"
							href="?still"
							onclick="return false"
							title="LOCALISED_TRANSLATION"
							data-bind="attr: { title:VIDEO2_TRANSCRIPT_BUTTON_TEXT_SUBSCREEN}"
							aria-controls='{{domId}}TranscriptContentL'
							aria-expanded='false'
							role="button"
						>
						<span data-bind="gomotext: VIDEO2_TRANSCRIPT_BUTTON_TEXT_SUBSCREEN">LOCALISED_TRANSLATION</span></a>
					</span>
				{{/if}}
			</div>
		{{/if}}

	</script><script id="imagehotspot" type="text/x-handlebars-template">
      <div
        id="imagehotspotAsset_{{strID}}_WrapperL"
        class="assetWrapperC imageHotspotAssetWrapperC nonSettingsElementC {{strAlignment}} imageHotspot"
      >
        <span class="imageHotspotAssetInnerWrapperC">
          <img
            src="{{objNormalSrc.decodedSrc}}"
            title="{{{objNormalSrc.strAltText}}}"
            alt="{{{objNormalSrc.strAltText}}}"
            class="imageHotspotAssetC imageHotspot__image"
            data-bind="attr: {alt:renderImage.strAltText, title:renderImage.strAltText, src:renderImage.strSrc}"
          />
          {{#each arrHotspots}}
					<a
						id="imageHotspot_{{strID}}_L"
						class="hotspotSubAssetC imageHotspot__hotspot"
						href="#"
						title="{{{strText}}}"
						data-hotspot-index="{{@index}}"
						style="{{{hotspotSizePositionCss}}}"
						role="button"
						aria-label="{{{ariaLabel}}}"
            data-bind='attr: {"title":arrHotspots()[{{@index}}].strText, "aria-label":arrHotspots()[{{@index}}].ariaLabel}'
        	>
						<span>
							<img
								src="{{currentSrc}}"
								alt="{{{strText}}}"
								class="hotspotSpriteImageC imageHotspot__hotspot-image"
								style="{{{hotspotImageSizePositionCss}}}"
                data-bind="attr: {alt:arrHotspots()[{{@index}}].strText, src:arrHotspots()[{{@index}}].currentSrc}"
							/>
						</span>
					</a>	
					{{/each}}
        </span>
      </div>
    </script><script id="filmstrip" type="text/x-handlebars-template">
			<div
				id='filmstripAsset_{{ domId }}_WrapperL'
				class='assetWrapperC filmstripAssetWrapperC {{columnClass}}'
			>
			{{#if showStepNumbers}}
				<div class='filmstripNumStepsWrapperC'>
					{{#each arrStepData}}
						<div
							id='filmstripNumStep_{{@index}}_{{domId}}_L'
							class='filmstripNumStepC inactiveC unvisitedC'
						>
							<a
								class='filmstripNumStepButton'
								href='?still'
								data-direction='{{@index}}'
								data-isNumberStep='true'
							>
								<span class='stepIndicatorNumberWrapperC'>
									{{stepNumber}}
								</span>
							</a>
						</div>
					{{/each}}
				</div>
				{{/if}}
				<div class='filmstripStepMaskC'>
					<div
						id='filmstripStepsHolderC_{{domId}}_WrapperL'
						class='filmstripStepsHolderC'
						role='region'
					>
						{{#each arrStepData}}
							<div
								id='filmstripStep_{{domId}}_Step_{{@index}}_WrapperL'
								class='filmstripStepWrapperC {{#if @first}}filmstripStepCurrent{{/if}} subscreensBeneathC'
								data-step-number='{{@index}}'
								aria-hidden='{{#if @first}}false{{else}}true{{/if}}'
								aria-roledescription="{{@root.localisedStepLabel}}"
								aria-label="{{strTitle}}"
								data-bind="attr: { 'aria-label': arrStepData()[{{@index}}].strTitle }"
							>
								{{#if showStepTitles}}
									<h2
										class='stepTitleC'
										data-bind='gomotext: arrStepData()[{{@index}}].strTitle'
									>
										{{strTitle}}
									</h2>
								{{/if}}
								<img
									src='resources/{{objImageSrc.strSrc}}'
									alt='{{{objImageSrc.strAltText}}}'
									title='{{{objImageSrc.strAltText}}}'
									class='filmstriptStepImageAssetC'
									data-bind='attr: { alt:renderImages()[{{@index}}].strAltText, title:renderImages()[{{@index}}].strAltText, src:renderImages()[{{@index}}].strSrc}'
								/>
								{{{subscreenHtml}}}
							</div>
						{{/each}}
					</div>
				</div>
				<span data-bind='disableBindings: true'>
					<a
						class='filmstripArrowC filmstripUpArrowC addColourSettingsBorderC localisationWrapper'
						aria-label='LOCALISED_TRANSLATION'
						data-bind='attr: {"aria-label": FILMSTRIP_PREVIOUS_BUTTON_LABEL }'
						role='button'
						aria-disabled='false'
						aria-controls='filmstripStepsHolderC_{{domId}}_WrapperL'
						data-direction='-1'
						href="javascript:void(0)"
					>
						<span class='filmstripArrowIconC'>
							<span class='buttonTextC' data-bind='gomotext: FILMSTRIP_PREVIOUS_BUTTON_LABEL'>LOCALISED_TRANSLATION</span>
						</span>
					</a>
				</span>
				<span data-bind='disableBindings: true'>
					<a
						class='filmstripArrowC filmstripDownArrowC addColourSettingsBorderC localisationWrapper'
						aria-label='LOCALISED_TRANSLATION'
						data-bind='attr: { "aria-label": FILMSTRIP_NEXT_BUTTON_LABEL }'
						role='button'
						aria-disabled='false'
						aria-controls='filmstripStepsHolderC_{{domId}}_WrapperL'
						data-direction='1'
						href="javascript:void(0)"
					>
						<span class='filmstripArrowIconC'>
							<span class='buttonTextC' data-bind='gomotext: FILMSTRIP_NEXT_BUTTON_LABEL'>LOCALISED_TRANSLATION</span>
						</span>
					</a>
				</span>
			</div>
    </script><script id="sfl" type="text/x-handlebars-template">
		<div id="sfl_{{strID}}_WrapperL" class="assetWrapperC sflAssetWrapperC">
			<div id="sflOptions_{{strID}}_WrapperL" class="sflOptionsWrapperC" role="group">
			{{#each arrOptions}}
				<a id="sflAsset_{{../strID}}_Option{{increment @index}}WrapperL" role="checkbox" aria-checked="false"
					class="sflOptionC inhibitIScrollForAndroidC unSelectedOptionC" href="javascript:void(0)"
					data-index="{{@index}}">
						<span class="optionSelectionMarkerC"></span>
						<span class="optionText" data-bind="gomotext: arrOptions()[{{@index}}].strOptionText">{{{strFormattedOptionText}}}</span>
						<img id="sflAsset_{{../strID}}_Option{{increment @index}}CorrectnessL" class="correctnessMarkerC unSetCorrectnessC" src="resources/trans.gif?trans.gif" alt="" aria-hidden="true"/>
				</a>
			{{/each}}
			</div>
			{{> confirmButton}} {{> resetButton}}
		</div>
	</script><script id="countdown-timer" type="text/x-handlebars-template">
		<div class="timerAsset">
			
			{{#if pieDisplayMode}}
				<div class="timerWrapper pie assetWrapperC {{alignment}}">
					<div class="timer-bg gt50">
						<div class="pie"></div>
						<div class="pie fill"></div>
					</div>
					<div class="timer fill">
						<div class="slice gt50">
							<div class="pie"></div>
							<div class="pie fill"></div>
						</div>
					</div>
					{{#if showTextCountdown}}
						<div class="countdownText">
							<span class="minutes-countdown">{{minutes}}</span>
							<span data-bind="gomotext: minutesLabel">{{minutesLabel}}</span>
              <span>:</span>
              <span class="seconds-countdown">{{seconds}}</span>
							<span data-bind="gomotext: secondsLabel">{{secondsLabel}}</span>
						</div>
					{{/if}}
				</div>
			{{/if}}

			
			{{#if circleDisplayMode}}
				<div class="timerWrapper circle assetWrapperC {{alignment}}">
					<div class="timer-bg circle gt50"></div>
					<div class="timer circle">
						<div class="slice gt50">
							<div class="pie"></div>
							<div class="pie fill"></div>
						</div>
					</div>
					{{#if showTextCountdown}}
						<div class="countdownText">
							<span class='minutes-countdown'>{{minutes}}</span>
							<span data-bind="gomotext: minutesLabel">{{minutesLabel}}</span>
							<span>:</span>
							<span class='seconds-countdown'>{{seconds}}</span>
							<span data-bind="gomotext: secondsLabel">{{secondsLabel}}</span>
						</div>
					{{/if}}
				</div>
			{{/if}}

			
			{{#if barDisplayMode}}
				<div class="timerWrapper bar assetWrapperC {{alignment}}">
					<div class="timer bar">
						<div class="bar-inner"></div>
					</div>
					{{#if showTextCountdown}}
						<div class="countdownText">
							<span class='minutes-countdown'>{{minutes}}</span>
							<span data-bind="gomotext: minutesLabel">{{minutesLabel}}</span>
							<span>:</span>
							<span class='seconds-countdown'>{{seconds}}</span>
							<span data-bind="gomotext: secondsLabel">{{secondsLabel}}</span>
						</div>
					{{/if}}
				</div>
			{{/if}}

			
			{{#if textDisplayMode}}
				<div class="timerWrapper text-only assetWrapperC {{alignment}}">
					<div class="timer text-only">
						<div class="countdownText">
							<span class='minutes-countdown'>{{minutes}}</span>
							<span data-bind="gomotext: minutesLabel">{{minutesLabel}}</span>
							<span>:</span>
							<span class='seconds-countdown'>{{seconds}}</span>
							<span data-bind="gomotext: secondsLabel">{{secondsLabel}}</span>
						</div>
					</div>
				</div>
			{{/if}}
		</div>
		{{#unless hiddenDisplayMode}}
			<div class="screenReaderOnlyElementC countdownText--sr" role="timer" aria-live="assertive" aria-atomic="false">
				{{minutes}}:{{seconds}}
			</div>
		{{/unless}}
	</script><script id="mcq" type="text/x-handlebars-template">
      <div id="mcq_{{strID}}_WrapperL" class="assetWrapperC mcqAssetWrapperC">
      	<div id="mcqOptions_{{strID}}_WrapperL" class="mcqOptionsWrapperC" role="group">
				{{#each arrOptions}}
					<a id="mcqAsset_{{../strID}}_Option{{increment @index}}WrapperL" role="radio" aria-checked="false"
						class="mcqOptionC inhibitIScrollForAndroidC unSelectedOptionC" href="javascript:void(0)"
						data-index="{{@index}}">
							<span class="optionSelectionMarkerC"></span>
							<span class="optionText" data-bind="gomotext: arrOptions()[{{@index}}].strOptionText">{{{strFormattedOptionText}}}</span>
							<img id="mcqAsset_{{../strID}}_Option{{increment @index}}CorrectnessL" class="correctnessMarkerC unSetCorrectnessC" src="resources/trans.gif?trans.gif" alt="" aria-hidden="true"/>
					</a>
				{{/each}}
				</div>
				{{> confirmButton}} {{> resetButton}}
			</div>
		</script><script id="accordion" type="text/x-handlebars-template">
      <div
        id='accordionAsset_{{domId}}_WrapperL'
        class='assetWrapperC accordionAssetWrapperC accordionAssetClosedC'
      >
        {{#each arrStepData}}
          <div
            id='accordionStep_{{strID}}_WrapperL'
            class='accordionStepWrapperC panel'
          >
            <div class='panel-heading' role='heading' aria-level='2'>
              <a
                id='accordionStep_{{strID}}'
                data-toggle='collapse'
                data-bind='gomotext: arrStepData()[{{@index}}].formattedTitle, attr: { "aria-label": arrStepData()[{{@index}}].formattedLabel }'
                data-parent='#accordionAsset_{{@root.domId}}_WrapperL'
                href='#accordionStep_{{strID}}_L'
                class='accordionStepTitleC notVisitedC'
                role='button'
                aria-expanded='false'
                aria-controls='accordionStep_{{strID}}_L'
                aria-label='{{{formattedLabel}}}'
              >
                {{{formattedTitle}}}
              </a>
            </div>
            <div
              id='accordionStep_{{strID}}_L'
              class='accordionStepContentWrapperC collapse'
              aria-labelledby='accordionStep_{{strID}}'
            >
              <div
                class='accordionStepContentC'
                data-bind='gomotext: arrStepData()[{{@index}}].formattedContent'
              >
                {{{formattedContent}}}
              </div>
            </div>
          </div>
        {{/each}}
      </div>
    </script><script id="menubutton" type="text/x-handlebars-template">
      <div
        id="menubuttonAsset_{{strID}}_WrapperL"
        class="assetWrapperC menuButtonAssetWrapperC
          {{strAlignment}} buttonState{{topicCompletionState}}C"
      >
        <button
          type="button"
          class="buttonC menuButtonC btn btn-default {{buttonStyle}} {{enabledClassname}}">
          {{#if formattedLabel}}
            <span
              class="menuTitleC"
              data-bind="gomotext: formattedLabel"
            >{{{formattedLabel}}}</span>
          {{/if}}
          {{#if strTargetTime}}
            <span class="menuTimeC"> 
              <span class="durationLabel localisationWrapper screenReaderOnlyElementC" data-bind="gomotext: MENUBUTTON_DURATION_LABEL">LOCALISED_TRANSLATION</span>
              <span class="targetTime" data-bind="gomotext: formattedTargetTime">{{{formattedTargetTime}}}</span>
            </span>
          {{/if}}
          <span
            class="menuProgressC trackingState{{topicCompletionState}}C"
            aria-label="LOCALISED_TRANSLATION"
          ></span>
          {{#if recommendedTopic}}
            <span class="recommendationIcon"></span>
          {{/if}}
        </button>
      </div>
    </script></div></body></html>