webaudioevaluationtool: test_create.html comparison

comparison test_create.html @ 2916:300bb2bbba4a

Merge branch 'master' of https://github.com/BrechtDeMan/WebAudioEvaluationTool

author	www-data <www-data@sucuk.dcs.qmul.ac.uk>
date	Tue, 01 Aug 2017 15:23:47 +0100
parents	7b6cdd27f3ee
children	c496aef6448b a5a6c44bab6e

comparison

equal deleted inserted replaced

-:0e4b84497040
+:300bb2bbba4a
 <script type="text/javascript" src="js/specification.js"></script>
 <script type="text/javascript" src="test_create/test_core.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <script type="text/javascript" src="js/xmllint.js"></script>
-<title>WAET 1.2.1 Test Creator</title>
+<title>WAET 1.2.2 Test Creator</title>
 </head>
 <body ng-app="creator" ng-controller="view">
 <div class="container">
 <div id="pageRoot">
-<h1>Web Audio Evaluation Tool - Test Creator</h1>
+<h1>Web Audio Evaluation Tool</h1>
+<h3>Test Creator <span class="label label-primary">v1.2.2</span></h3>
 </div>
 <button type="button" class="btn btn-info" ng-click="validate()">Validate</button>
 <button type="button" class="btn btn-success" ng-click="exportXML()" ng-disabled="validated == false">Export XML</button>
 <div ng-switch on="validated" ng-show="showValidationMessages">
 <div class="panel panel-danger" ng-switch-when="false">
 <div id="setupNode" class="node" ng-controller="setup">
 <h2>Setup</h2>
 <div class="attributes">
 <div class="attribute">
 <span>Interface: </span>
-<input type="text" ng-model="specification.interface" required/>
+<select type="text" ng-model="specification.interface" required>
+<option value="{{i.name}}" ng-repeat="i in availableInterfaceModules">{{i.name}}</option>
+</select>
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="If you would like to save to a server other than your hosting server, you can place the full WAET URL here">
 <span>Save URL: </span>
 <input type="text" ng-model="specification.projectReturn" placeholder="save.php" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Once the test is completed and save confirmed, the browser will redirect to this page, if not defined.">
 <span>Exit URL: </span>
-<input type="text" ng-model="specification.returnURL" />
+<input type="text" ng-model="specification.returnURL" placeholder="{{placeholder('returnURL')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Randomise the page order">
 <span>Randomise Page Order: </span>
 <input type="checkbox" ng-model="specification.randomiseOrder" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Set the number of pages to present to the user. This includes repeated pages. Set to '0' or blank to ignore. Randomise page order must be selected.">
 <span>Page Pool Size: </span>
-<input type="number" ng-model="specification.poolSize" min="0" />
+<input type="number" ng-model="specification.poolSize" min="0" placeholder="{{placeholder('poolSize')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Automatically analyse and normalsie audio to this target LUFS. If unsure, use -25LUFS. 0 or blank disables normalisation">
 <span>Loudness Normalisation (LUFS): </span>
-<input type="number" ng-model="specification.loudness" max="0" />
+<input type="number" ng-model="specification.loudness" max="0" placeholder="{{placeholder('loudness')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Only perform the test if the browser reported sampling rate matches this.">
 <span>Fixed Sampling Rate: </span>
-<input type="number" ng-model="specification.sampleRate" min="0" />
+<input type="number" ng-model="specification.sampleRate" min="0" placeholder="{{placeholder('sampleRate')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Show a 'method of adjustment' audio calibration before testing.">
 <span>Pre-Test audio calibration: </span>
 <input type="checkbox" ng-model="specification.calibration" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Default cross-fade time when switching between elements. Can be over-ridden on each page">
 <span>Global Cross-fade time: </span>
-<input type="number" ng-model="specification.crossFade" min="0" step="0.1" />
+<input type="number" ng-model="specification.crossFade" min="0" step="0.1" placeholder="{{placeholder('crossFade')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Default pre-play element silence. Can be over-ridden on each page and element">
 <span>Global Fragment Pre-Silence: </span>
-<input type="number" ng-model="specification.preSilence" min="0" step="0.1" />
+<input type="number" ng-model="specification.preSilence" min="0" step="0.1" placeholder="{{placeholder('preSilence')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Default post-play element silence. Can be over-ridden on each page and element">
 <span>Global Fragment Post-Silence: </span>
-<input type="number" ng-model="specification.preSilence" min="0" step="0.1" />
+<input type="number" ng-model="specification.postSilence" min="0" step="0.1" placeholder="{{placeholder('postSilence')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Disable switching of audio elements">
 <span>Play audio one-at-a-time: </span>
 <input type="checkbox" ng-model="specification.playOne" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum number of times an audio fragment must be played">
 <span>Minimum number of fragment plays</span>
-<input type="number" ng-model="specification.minNumberPlays" min="0" max="{{specification.maxNumberPlays}}" />
+<input type="number" ng-model="specification.minNumberPlays" min="0" max="{{specification.maxNumberPlays}}" placeholder="{{placeholder('minNumberPlays')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum number of times an audio fragment can be played">
 <span>Maximum number of fragment plays</span>
-<input type="number" ng-model="specification.maxNumberPlays" min="{{specification.minNumberPlays || 0}}" />
+<input type="number" ng-model="specification.maxNumberPlays" min="{{specification.minNumberPlays || 0}}" placeholder="{{placeholder('maxNumberPlays')}}" />
 </div>
 </div>
 <div class="node">
 <h2>Test Completed Message</h2>
 <textarea ng-model="specification.exitText" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Once the test is completed, you can show a message to the user. Markdown syntax is supported for formatting."></textarea>
 </div>
 </div>
 <div id="globalpresurvey" class="node" ng-controller="survey" ng-init="survey = specification.preTest">
 <h2>Pre Test Survey</h2>
 <button type="button" class="btn btn-success" ng-click="addSurveyEntry()">Add Entry</button>
-<div class="node" ng-repeat="opt in survey.options" ng-controller="surveyOption">
+<div class="node surveyentry" ng-repeat="opt in survey.options" ng-controller="surveyOption">
 <h3>Survey Entry</h3>
 <button type="button" class="btn btn-danger" ng-click="removeSurveyEntry(opt);">Delete Entry</button>
 <div class="attributes">
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Type of survey entry.">
 <span>Survey Type: </span>
 <select ng-model="opt.type">
 <option value="question">Question</option>
 <option value="radio">Radio</option>
 <option value="checkbox">Checkbox</option>
 <option value="slider">Slider</option>
 <option value="video">Video</option>
 <option value="youtube">YouTube</option>
 </select>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Unique across the entire session of all ID entries. ">
 <span>Unique Survey Entry ID:</span>
 <input type="text" ng-model="opt.id" required/>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Friendly name. Will be used in test results parsers instead of the ID, if defined.">
 <span>Entry Name:</span>
 <input type="text" ng-model="opt.name" />
 </div>
-<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="An answer must be given to continue with the test.">
 <span>Mandatory:</span>
 <input type="checkbox" ng-model="opt.mandatory" />
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum time in seconds before continuing.">
 <span>Minimum Wait Time (s):</span>
 <input type="number" ng-model="opt.minWait" min="0" />
 </div>
-<div class="attribute" ng-show="opt.type == 'question'">
+<div class="attribute" ng-show="opt.type == 'question'" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Size of the displayed text box. Does not limit entry but may discourage (or encourage) longer ansewrs if bigger.">
 <span>Box Size:</span>
 <select ng-model="opt.boxsize">
 <option value="small">Small</option>
 <option value="normal">Normal</option>
 <option value="large">Large</option>
 <option value="huge">Huge</option>
 </select>
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="The minimum number of options that must be selected before continuing">
 <span>Minimum Selected:</span>
 <input type="number" ng-model="opt.min" min="0" />
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum number of options that can be selected to continue.">
 <span>Maximum Selected:</span>
 <input type="number" ng-model="opt.max" max="{{opt.options.length}}" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum numerical value">
 <span>Minimum Value:</span>
 <input type="number" ng-model="opt.min" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum numerical value">
 <span>Maximum Value:</span>
 <input type="number" ng-model="opt.max" />
 </div>
-<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="URL of the video to embed.">
 <span>Video URL:</span>
 <input type="text" ng-model="opt.url" />
 </div>
 </div>
-<div class="node">
+<div class="node" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Statement / Question to pose to the subject.">
 <h4>Statement</h4>
 <textarea ng-model="opt.statement"></textarea>
 </div>
 <div class="node" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
 <h4>Options</h4>
 </div>
 </div>
 <div id="globalpostsurvey" class="node" ng-controller="survey" ng-init="survey = specification.postTest">
 <h2>Post Test Survey</h2>
 <button type="button" class="btn btn-success" ng-click="addSurveyEntry()">Add Entry</button>
-<div class="node" ng-repeat="opt in survey.options" ng-controller="surveyOption">
+<div class="node surveyentry" ng-repeat="opt in survey.options" ng-controller="surveyOption">
 <h3>Survey Entry</h3>
 <button type="button" class="btn btn-danger" ng-click="removeSurveyEntry(opt);">Delete Entry</button>
 <div class="attributes">
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Type of survey entry.">
 <span>Survey Type: </span>
 <select ng-model="opt.type">
 <option value="question">Question</option>
 <option value="radio">Radio</option>
 <option value="checkbox">Checkbox</option>
 <option value="slider">Slider</option>
 <option value="video">Video</option>
 <option value="youtube">YouTube</option>
 </select>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Unique across the entire session of all ID entries. ">
 <span>Unique Survey Entry ID:</span>
 <input type="text" ng-model="opt.id" required/>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Friendly name. Will be used in test results parsers instead of the ID, if defined.">
 <span>Entry Name:</span>
 <input type="text" ng-model="opt.name" />
 </div>
-<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="An answer must be given to continue with the test.">
 <span>Mandatory:</span>
 <input type="checkbox" ng-model="opt.mandatory" />
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum time in seconds before continuing.">
 <span>Minimum Wait Time (s):</span>
 <input type="number" ng-model="opt.minWait" min="0" />
 </div>
-<div class="attribute" ng-show="opt.type == 'question'">
+<div class="attribute" ng-show="opt.type == 'question'" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Size of the displayed text box. Does not limit entry but may discourage (or encourage) longer ansewrs if bigger.">
 <span>Box Size:</span>
 <select ng-model="opt.boxsize">
 <option value="small">Small</option>
 <option value="normal">Normal</option>
 <option value="large">Large</option>
 <option value="huge">Huge</option>
 </select>
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="The minimum number of options that must be selected before continuing">
 <span>Minimum Selected:</span>
 <input type="number" ng-model="opt.min" min="0" />
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum number of options that can be selected to continue.">
 <span>Maximum Selected:</span>
 <input type="number" ng-model="opt.max" max="{{opt.options.length}}" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum numerical value">
 <span>Minimum Value:</span>
 <input type="number" ng-model="opt.min" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum numerical value">
 <span>Maximum Value:</span>
 <input type="number" ng-model="opt.max" />
 </div>
-<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="URL of the video to embed.">
 <span>Video URL:</span>
 <input type="text" ng-model="opt.url" />
 </div>
 </div>
-<div class="node">
+<div class="node" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Statement / Question to pose to the subject.">
 <h4>Statement</h4>
 <textarea ng-model="opt.statement"></textarea>
 </div>
 <div class="node" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
 <h4>Options</h4>
 </div>
 <div id="globalinterface" class="node" ng-controller="interfaceNode" ng-init="interface = specification.interfaces">
 <h2>Interface (Globals)</h2>
 <div class="node interfaceOptions">
 <div class="attributes">
-<div class="attribute" name="fragmentPlayed" type="check">
+<div class="attribute" name="fragmentPlayed" type="check" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="A page can only be submitted if all fragments have been played">
 <span>Check all fragments played: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="fragmentFullPlayback" type="check">
+<div class="attribute" name="fragmentFullPlayback" type="check" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="A page can only be submitted if all fragments have been played completely.">
 <span>Check all fragments fully played: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="fragmentMoved" type="check">
+<div class="attribute" name="fragmentMoved" type="check" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="A page can only be submitted if all fragments have been moved">
 <span>Check all fragments have been moved: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="fragmentComments" type="check">
+<div class="attribute" name="fragmentComments" type="check" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="A page can only be submitted if all fragments have their comment boxes completed.">
 <span>Check all fragments have comments: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="scalerange" type="check">
+<div class="attribute" name="scalerange" type="check" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="A page can only be submitted if there are fragments above and below the maximum and minimum ranges.">
 <span>Enforce a scale usage: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 <span>Minimum:</span>
 <input type="number" min="0" max="100" name="min" />
 <span>Maximum:</span>
 <input type="number" min="0" max="100" name="max" />
 </div>
-<div class="attribute" name="volume" type="show">
+<div class="attribute" name="volume" type="show" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Show the master volume control on each page.">
 <span>Show master volume control: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="playhead" type="show">
+<div class="attribute" name="playhead" type="show" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Show the playhead for the fragments.">
 <span>Show playhead: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="page-count" type="show">
+<div class="attribute" name="page-count" type="show" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Show number of completed and remaining pages.">
 <span>Show Page Count: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
-<div class="attribute" name="comments" type="show">
+<div class="attribute" name="comments" type="show" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Show comment boxes for each fragment.">
 <span>Show Fragment Comments: </span>
 <input type="checkbox" ng-click="enableInterfaceOption($event)" />
 </div>
 </div>
 </div>
 <div class="attribute">
 <span>Randomise Fragment Order: </span>
 <input type="checkbox" ng-model="page.randomiseOrder" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Specify if this page should be repeated and how many times. Please note, that if page-pooling is also selected then it 'may' not repeat as many times.">
-<span>Repeat Page N-times: </span>
+<span>Numer of repetitions: </span>
-<input type="number" ng-model="page.repeatCount" value="0" step="1" />
+<input type="number" ng-model="page.repeatCount" value="0" step="1" placeholder="{{placeholder('repeatCount')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Loop audio playback until manually stopped or the page submit button is pressed">
 <span>Loop audio: </span>
 <input type="checkbox" ng-model="page.loop" />
 </div>
 <span>Synchronous audio playback: </span>
 <input type="checkbox" ng-model="page.synchronous" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Over-ride global loudness normalisation">
 <span>Loudness (page): </span>
-<input type="number" ng-model="page.loudness" max="0" />
+<input type="number" ng-model="page.loudness" max="0" placeholder="{{specification.loudness || placeholder('loudness')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Label type to display on the fragments.">
 <span>Label type: </span>
 <select ng-model="page.label">
 <option value="default">Default</option>
 <span>Label Start: </span>
 <input type="text" ng-model="page.labelStart" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Select a subgroup of the given audio fragments to display. 0 or blank means all fragments will be displayed.">
 <span>Fragment pool size: </span>
-<input type="number" ng-model="page.poolSize" min="0" max="page.audioElements.length" />
+<input type="number" ng-model="page.poolSize" min="0" max="page.audioElements.length" placeholder="{{placeholder('poolSize')}}" />
 </div>
 <div class="attribute" ng-show="specification.poolSize > 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Always display this page, even after sub-pooling of pages">
 <span>Always include page: </span>
 <input type="checkbox" ng-model="page.alwaysInclude" />
 </div>
 <span>Fixed Page Position: </span>
 <input type="number" ng-model="page.position" min="0" max="{{specification.pages.length}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Over-ride global pre-silence">
 <span>Fragment pre-silence: </span>
-<input type="number" ng-model="page.preSilence" min="0" step="0.1" />
+<input type="number" ng-model="page.preSilence" min="0" step="0.1" placeholder="{{specification.preSilence ||  placeholder('preSilence')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Over-ride global post-silence">
 <span>Fragment post-silence: </span>
-<input type="number" ng-model="page.postSilence" min="0" step="0.1" />
+<input type="number" ng-model="page.postSilence" min="0" step="0.1" placeholder="{{specification.postSilence ||  placeholder('postSilence')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Disable switching of audio">
 <span>Cannot interupt audio: </span>
 <input type="checkbox" ng-model="page.playOne" />
 </div>
 <span>Only move playing audio: </span>
 <input type="checkbox" ng-model="page.restrictMovement" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Over-ride global minimum number of fragment plays">
 <span>Minimum number of fragment plays</span>
-<input type="number" ng-model="page.minNumberPlays" min="0" max="{{page.maxNumberPlays || specification.maxNumberPlays}}" />
+<input type="number" ng-model="page.minNumberPlays" min="0" max="{{page.maxNumberPlays || specification.maxNumberPlays}}" placeholder="{{specification.minNumberPlays ||  placeholder('minNumberPlays')}}" />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Over-ride global maximum number of fragment plays">
 <span>Maximum number of fragment plays</span>
-<input type="number" ng-model="page.maxNumberPlays" min="{{page.minNumberPlays || specification.minNumberPlays || 0}}" />
+<input type="number" ng-model="page.maxNumberPlays" min="{{page.minNumberPlays || specification.minNumberPlays || 0}}" placeholder="{{specification.maxNumberPlays ||  placeholder('maxNumberPlays')}}" />
 </div>
 </div>
 <div class="node" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Set the title of the page">
 <h3>Page Title</h3>
 <textarea ng-model="page.title"></textarea>
 </p>
 </div>
 <div class="node" ng-controller="survey" ng-init="survey = page.preTest">
 <h2>Pre Page Survey</h2>
 <button type="button" class="btn btn-success" ng-click="addSurveyEntry()">Add Entry</button>
-<div class="node" ng-repeat="opt in survey.options" ng-controller="surveyOption">
+<div class="node surveyentry" ng-repeat="opt in survey.options" ng-controller="surveyOption">
 <h3>Survey Entry</h3>
 <button type="button" class="btn btn-danger" ng-click="removeSurveyEntry(opt);">Delete Entry</button>
 <div class="attributes">
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Type of survey entry.">
 <span>Survey Type: </span>
 <select ng-model="opt.type">
 <option value="question">Question</option>
 <option value="radio">Radio</option>
 <option value="checkbox">Checkbox</option>
 <option value="slider">Slider</option>
 <option value="video">Video</option>
 <option value="youtube">YouTube</option>
 </select>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Unique across the entire session of all ID entries. ">
 <span>Unique Survey Entry ID:</span>
 <input type="text" ng-model="opt.id" required/>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Friendly name. Will be used in test results parsers instead of the ID, if defined.">
 <span>Entry Name:</span>
 <input type="text" ng-model="opt.name" />
 </div>
-<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="An answer must be given to continue with the test.">
 <span>Mandatory:</span>
 <input type="checkbox" ng-model="opt.mandatory" />
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum time in seconds before continuing.">
 <span>Minimum Wait Time (s):</span>
 <input type="number" ng-model="opt.minWait" min="0" />
 </div>
-<div class="attribute" ng-show="opt.type == 'question'">
+<div class="attribute" ng-show="opt.type == 'question'" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Size of the displayed text box. Does not limit entry but may discourage (or encourage) longer ansewrs if bigger.">
 <span>Box Size:</span>
 <select ng-model="opt.boxsize">
 <option value="small">Small</option>
 <option value="normal">Normal</option>
 <option value="large">Large</option>
 <option value="huge">Huge</option>
 </select>
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="The minimum number of options that must be selected before continuing">
 <span>Minimum Selected:</span>
 <input type="number" ng-model="opt.min" min="0" />
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum number of options that can be selected to continue.">
 <span>Maximum Selected:</span>
 <input type="number" ng-model="opt.max" max="{{opt.options.length}}" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum numerical value">
 <span>Minimum Value:</span>
 <input type="number" ng-model="opt.min" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum numerical value">
 <span>Maximum Value:</span>
 <input type="number" ng-model="opt.max" />
 </div>
-<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="URL of the video to embed.">
 <span>Video URL:</span>
 <input type="text" ng-model="opt.url" />
 </div>
 </div>
-<div class="node">
+<div class="node" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Statement / Question to pose to the subject.">
 <h4>Statement</h4>
 <textarea ng-model="opt.statement"></textarea>
 </div>
 <div class="node" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
 <h4>Options</h4>
 </div>
 </div>
 <div class="node" ng-controller="survey" ng-init="survey = page.postTest">
 <h2>Post Page Survey</h2>
 <button type="button" class="btn btn-success" ng-click="addSurveyEntry()">Add Entry</button>
-<div class="node" ng-repeat="opt in survey.options" ng-controller="surveyOption">
+<div class="node surveyentry" ng-repeat="opt in survey.options" ng-controller="surveyOption">
 <h3>Survey Entry</h3>
 <button type="button" class="btn btn-danger" ng-click="removeSurveyEntry(opt);">Delete Entry</button>
 <div class="attributes">
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Type of survey entry.">
 <span>Survey Type: </span>
 <select ng-model="opt.type">
 <option value="question">Question</option>
 <option value="radio">Radio</option>
 <option value="checkbox">Checkbox</option>
 <option value="slider">Slider</option>
 <option value="video">Video</option>
 <option value="youtube">YouTube</option>
 </select>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Unique across the entire session of all ID entries. ">
 <span>Unique Survey Entry ID:</span>
-<input type="text" ng-model="opt.id" required />
+<input type="text" ng-model="opt.id" required/>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Friendly name. Will be used in test results parsers instead of the ID, if defined.">
 <span>Entry Name:</span>
 <input type="text" ng-model="opt.name" />
 </div>
-<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="An answer must be given to continue with the test.">
 <span>Mandatory:</span>
 <input type="checkbox" ng-model="opt.mandatory" />
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum time in seconds before continuing.">
 <span>Minimum Wait Time (s):</span>
 <input type="number" ng-model="opt.minWait" min="0" />
 </div>
-<div class="attribute" ng-show="opt.type == 'question'">
+<div class="attribute" ng-show="opt.type == 'question'" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Size of the displayed text box. Does not limit entry but may discourage (or encourage) longer ansewrs if bigger.">
 <span>Box Size:</span>
 <select ng-model="opt.boxsize">
 <option value="small">Small</option>
 <option value="normal">Normal</option>
 <option value="large">Large</option>
 <option value="huge">Huge</option>
 </select>
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="The minimum number of options that must be selected before continuing">
 <span>Minimum Selected:</span>
 <input type="number" ng-model="opt.min" min="0" />
 </div>
-<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum number of options that can be selected to continue.">
 <span>Maximum Selected:</span>
 <input type="number" ng-model="opt.max" max="{{opt.options.length}}" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Minimum numerical value">
 <span>Minimum Value:</span>
 <input type="number" ng-model="opt.min" />
 </div>
-<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Maximum numerical value">
 <span>Maximum Value:</span>
 <input type="number" ng-model="opt.max" />
 </div>
-<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0">
+<div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="URL of the video to embed.">
 <span>Video URL:</span>
 <input type="text" ng-model="opt.url" />
 </div>
 </div>
-<div class="node">
+<div class="node" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Statement / Question to pose to the subject.">
 <h4>Statement</h4>
 <textarea ng-model="opt.statement"></textarea>
 </div>
 <div class="node" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
 <h4>Options</h4>
 </div>
 </div>
 </div>
 </div>
 <button type="button" class="btn btn-success" ng-show="specification.interface == 'APE' || page.interfaces.length == 0" ng-click="addInterface()">Add Interface/Axis</button>
-<div class="node" ng-repeat="interface in page.interfaces" ng-controller="interfaceNode">
+<div class="node interface" ng-repeat="interface in page.interfaces" ng-controller="interfaceNode">
 <h2>Interface</h2>
 <button type="button" class="btn btn-danger" ng-click="removeInterface(interface)">Remove Interface/Axis</button>
 <div class="node interfaceOptions">
 <div class="attributes">
 <div class="attribute" name="fragmentPlayed" type="check">
 </div>
 </div>
 </div>
 </div>
 <button type="button" class="btn btn-success" ng-click="addAudioElement()">Add Fragment</button>
-<div class="node" ng-repeat="fragment in page.audioElements">
+<div class="node audioelement" ng-repeat="fragment in page.audioElements">
 <h3>Audio Fragment</h3>
 <button type="button" class="btn btn-danger" ng-click="removeAudioElement(fragment)">Remove Fragment</button>
 <div class="attributes">
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="The unique ID of this fragment. Must be unique across the entire session">
 <span>Unique ID: </span>
 <input type="text" ng-model="fragment.id" required/>
 </div>
-<div class="attribute">
+<div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="URL of the fragment.">
 <span>URL: </span>
 <input type="text" ng-model="fragment.url" required/>
 <span>Full URL: </span><span style="font-weight=600">{{page.hostURL}}{{fragment.url}}</span>
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Set the gain of this fragment. This is applied after any normalisation">
 <option value="outside-reference">Outside Reference</option>
 </select>
 </div>
 <div class="attribute" ng-show="fragment.type == 'anchor'">
 <span>Anchor must be below: </span>
-<input type="number" ng-model="fragment.marker" min="0" max="100" />
+<input type="number" ng-model="fragment.marker" min="0" max="100" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="If this is set, the page cannot be submitted if this fragment is above this point." />
 </div>
 <div class="attribute" ng-show="fragment.type == 'reference'">
 <span>Reference must be above: </span>
-<input type="number" ng-model="fragment.marker" min="0" max="100" />
+<input type="number" ng-model="fragment.marker" min="0" max="100" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="If this is set, the page cannot be submitted if this fragment is below this point." />
 </div>
 <div class="attribute" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Over-ride global and page loudness">
 <span>Loudness: </span>
-<input type="number" ng-model="fragment.loudness" max="0" />
+<input type="number" ng-model="fragment.loudness" max="0" placeholder="{{page.loudness || specification.loudness || ''}}" />
 </div>
 <div class="attribute" ng-show="page.poolSize > 0" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="Always include this fragment after any sub-pooling">
 <span>Always include fragment: </span>
 <input type="checkbox" ng-model="fragment.alwaysInclude" max="0" />
 </div>
 </div>
 </div>
 <div id="popupHolder" ng-show="popupVisible">
 <div ng-controller="introduction" class="popup" ng-show="popupVisible">
 <div class="popupTitle" ng-switch="state">
-<span ng-switch-when="0">Test Creator</span>
+<span ng-switch-when="0">Test Creator <span class="label label-primary">v1.2.2</span></span>
 <span ng-switch-when="1">Create New Test</span>
 </div>
 <div class="popupContent container-fluid" ng-switch="state">
 <div ng-switch-when="0">
 <div>
-<span>Welcome to the WAET test creator tool. This will allow you to create a new test from scratch to suit your testing needs. If you wish to update a test file, please drag and drop the XML document into the area below for processing, otherwise press 'Next' to start a new test. This tool generates files for the WAET 1.2.1 version.</span>
+<span>Welcome to the WAET test creator tool. This will allow you to create a new test from scratch to suit your testing needs. If you wish to update a test file, please drag and drop the XML document into the area below for processing, otherwise press 'Next' to start a new test. This tool generates files for the WAET 1.2.2 version.</span>
 </div>
 <div>
 <input type="file" id="files" ng-model="files" onchange="handleFiles(event)" />
 </div>
 </div>
 <div>
 <span>Please select the interface you would like to use below. Selecting an interface will give a brief description of the interface type.</span>
 </div>
 <div class="row">
 <div class="col-md-6" style="overflow-y: scroll;height: 333px;">
-<div class="new-test" ng-repeat="i in testSpecifications.interfaces" ng-mouseover="mouseover(i.name)" ng-click="initialise(i.name)">
+<div class="new-test" ng-repeat="i in testSpecifications.interfaces" ng-mouseover="mouseover(i.name)" ng-click="select(i.name)">
 <label style="cursor:pointer">
 <input type="radio" name="new-test" value="{{i.name}}" id="i.name" style="cursor:pointer" /> {{i.name}}
 </label>
 </div>
 </div>

Mercurial > hg > webaudioevaluationtool

comparison test_create.html @ 2916:300bb2bbba4a