Mercurial > hg > webaudioevaluationtool

annotate test_create.html @ 2854:aed359997687

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
More functional changes to specification.js
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Wed, 26 Apr 2017 17:15:24 +0100
parents f75db4482006
children 6625f4ad24f4
rev   line source
nicholas@2224 1 <html>
nicholas@2538 2
nicholas@2224 3 <head>
nicholas@2494 4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
nicholas@2224 5 <!-- This defines the test creator tool for the Web Audio Evaluation Toolbox -->
nicholas@2851 6 <link rel="stylesheet" type="text/css" href="test_create/style.css" />
nicholas@2851 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
nicholas@2851 8 <script src="js/jquery-2.1.4.js"></script>
nicholas@2851 9 <script src="js/angular.min.js"></script>
nicholas@2851 10 <script type="text/javascript" src="js/specification.js"></script>
nicholas@2851 11 <script type="text/javascript" src="test_create/test_core.js"></script>
nicholas@2851 12 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
nicholas@2538 13
nicholas@2851 14 <title>WAET 1.2.1 Test Creator</title>
nicholas@2224 15 </head>
nicholas@2538 16
nicholas@2224 17 <body>
nicholas@2851 18 <div ng-app="creator" ng-controller="view">
nicholas@2851 19 <div id="pageRoot">
nicholas@2851 20 <h1>Web Audio Evaluation Tool - Test Creator</h1>
nicholas@2851 21 </div>
nicholas@2851 22 <div id="setupNode" class="node" ng-controller="setup">
nicholas@2851 23 <h2>Setup</h2>
nicholas@2851 24 <div class="attributes">
nicholas@2851 25 <div class="attribute">
nicholas@2851 26 <span>Interface: </span>
nicholas@2851 27 <input type="text" ng-model="specification.interface" />
nicholas@2851 28 </div>
nicholas@2851 29 <div class="attribute">
nicholas@2851 30 <span>Save URL: </span>
nicholas@2851 31 <input type="text" ng-model="specification.projectReturn" />
nicholas@2851 32 </div>
nicholas@2851 33 <div class="attribute">
nicholas@2851 34 <span>Exit URL: </span>
nicholas@2851 35 <input type="text" ng-model="specification.returnURL" />
nicholas@2851 36 </div>
nicholas@2851 37 <div class="attribute">
nicholas@2851 38 <span>Randomise Page Order: </span>
nicholas@2851 39 <input type="checkbox" ng-model="specification.randomiseOrder" />
nicholas@2851 40 </div>
nicholas@2851 41 <div class="attribute">
nicholas@2851 42 <span>Page Pool Size: </span>
nicholas@2851 43 <input type="number" ng-model="specification.poolSize" min="0" />
nicholas@2851 44 </div>
nicholas@2851 45 <div class="attribute">
nicholas@2851 46 <span>Loudness Normalisation (LUFS): </span>
nicholas@2851 47 <input type="number" ng-model="specification.loudness" max="0" />
nicholas@2851 48 </div>
nicholas@2851 49 <div class="attribute">
nicholas@2851 50 <span>Fixed Sampling Rate: </span>
nicholas@2851 51 <input type="number" ng-model="specification.sampleRate" min="0" />
nicholas@2851 52 </div>
nicholas@2851 53 <div class="attribute">
nicholas@2851 54 <span>Pre-Test audio calibration: </span>
nicholas@2851 55 <input type="checkbox" ng-model="specification.calibration" />
nicholas@2851 56 </div>
nicholas@2851 57 <div class="attribute">
nicholas@2851 58 <span>Global Cross-fade time: </span>
nicholas@2851 59 <input type="number" ng-model="specification.crossFade" min="0" step="0.1" />
nicholas@2851 60 </div>
nicholas@2851 61 <div class="attribute">
nicholas@2851 62 <span>Global Fragment Pre-Silence: </span>
nicholas@2851 63 <input type="number" ng-model="specification.preSilence" min="0" step="0.1" />
nicholas@2851 64 </div>
nicholas@2851 65 <div class="attribute">
nicholas@2851 66 <span>Global Fragment Post-Silence: </span>
nicholas@2851 67 <input type="number" ng-model="specification.preSilence" min="0" step="0.1" />
nicholas@2851 68 </div>
nicholas@2851 69 <div class="attribute">
nicholas@2851 70 <span>Play audio one-at-a-time: </span>
nicholas@2851 71 <input type="checkbox" ng-model="specification.playOne" />
nicholas@2851 72 </div>
nicholas@2851 73 </div>
nicholas@2853 74 <div class="node">
nicholas@2853 75 <h2>Test Completed Message</h2>
nicholas@2853 76 <textarea ng-model="specification.exitText"></textarea>
nicholas@2853 77 </div>
nicholas@2853 78 <div id="metricsNode" class="node">
nicholas@2853 79 <h3>Session Metrics</h3>
nicholas@2853 80 <div class="attributes">
nicholas@2853 81 <div class="attribute">
nicholas@2853 82 <span>Collect Total Test Time: </span>
nicholas@2853 83 <input type="checkbox" value="testTimer" ng-click="enableMetric($event)" />
nicholas@2853 84 </div>
nicholas@2853 85 <div class="attribute">
nicholas@2853 86 <span>Collect Fragment Listen Time: </span>
nicholas@2853 87 <input type="checkbox" value="elementTimer" ng-click="enableMetric($event)" />
nicholas@2853 88 </div>
nicholas@2853 89 <div class="attribute">
nicholas@2853 90 <span>Collect Fragment Initial Position: </span>
nicholas@2853 91 <input type="checkbox" value="elementInitialPosition" ng-click="enableMetric($event)" />
nicholas@2853 92 </div>
nicholas@2853 93 <div class="attribute">
nicholas@2853 94 <span>Collect Fragment Position over Time: </span>
nicholas@2853 95 <input type="checkbox" value="elementTracker" ng-click="enableMetric($event)" />
nicholas@2853 96 </div>
nicholas@2853 97 <div class="attribute">
nicholas@2853 98 <span>Collect Fragment Listened To Flag: </span>
nicholas@2853 99 <input type="checkbox" value="elementFlagListenedTo" ng-click="enableMetric($event)" />
nicholas@2853 100 </div>
nicholas@2853 101 <div class="attribute">
nicholas@2853 102 <span>Collect Fragment Moved Flag: </span>
nicholas@2853 103 <input type="checkbox" value="elementFlagMoved" ng-click="enableMetric($event)" />
nicholas@2853 104 </div>
nicholas@2853 105 <div class="attribute">
nicholas@2853 106 <span>Collect Fragment Listened Flag: </span>
nicholas@2853 107 <input type="checkbox" value="elementListenTracker" ng-click="enableMetric($event)" />
nicholas@2853 108 </div>
nicholas@2853 109 </div>
nicholas@2853 110 </div>
nicholas@2853 111 <div id="globalpresurvey" class="node">
nicholas@2853 112 <h2>Pre Test Survey</h2>
nicholas@2853 113 <div class="node" ng-repeat="opt in specification.preTest.options" ng-controller="surveyOption">
nicholas@2853 114 <h3>Survey Entry</h3>
nicholas@2853 115 <div class="attributes">
nicholas@2853 116 <div class="attribute">
nicholas@2853 117 <span>Survey Type: </span>
nicholas@2853 118 <select ng-model="opt.type">
nicholas@2853 119 <option value="question">Question</option>
nicholas@2853 120 <option value="radio">Radio</option>
nicholas@2853 121 <option value="checkbox">Checkbox</option>
nicholas@2853 122 <option value="statement">Statement</option>
nicholas@2853 123 <option value="number">Number</option>
nicholas@2853 124 <option value="slider">Slider</option>
nicholas@2853 125 <option value="video">Video</option>
nicholas@2853 126 <option value="youtube">YouTube</option>
nicholas@2853 127 </select>
nicholas@2853 128 </div>
nicholas@2853 129 <div class="attribute">
nicholas@2853 130 <span>Unique Survey Entry ID:</span>
nicholas@2853 131 <input type="text" ng-model="opt.id" />
nicholas@2853 132 </div>
nicholas@2853 133 <div class="attribute">
nicholas@2853 134 <span>Entry Name:</span>
nicholas@2853 135 <input type="text" ng-model="opt.name" />
nicholas@2853 136 </div>
nicholas@2853 137 <div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0">
nicholas@2853 138 <span>Mandatory:</span>
nicholas@2853 139 <input type="checkbox" ng-model="opt.mandatory" />
nicholas@2853 140 </div>
nicholas@2853 141 <div class="attribute">
nicholas@2853 142 <span>Minimum Wait Time (s):</span>
nicholas@2853 143 <input type="number" ng-model="opt.minWait" min="0" />
nicholas@2853 144 </div>
nicholas@2853 145 <div class="attribute" ng-show="opt.type == 'question'">
nicholas@2853 146 <span>Box Size:</span>
nicholas@2853 147 <select ng-model="opt.boxsize">
nicholas@2853 148 <option value="small">Small</option>
nicholas@2853 149 <option value="normal">Normal</option>
nicholas@2853 150 <option value="large">Large</option>
nicholas@2853 151 <option value="huge">Huge</option>
nicholas@2853 152 </select>
nicholas@2853 153 </div>
nicholas@2853 154 <div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
nicholas@2853 155 <span>Minimum Selected:</span>
nicholas@2853 156 <input type="number" ng-model="opt.min" min="0" />
nicholas@2853 157 </div>
nicholas@2853 158 <div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
nicholas@2853 159 <span>Maximum Selected:</span>
nicholas@2853 160 <input type="number" ng-model="opt.max" max="{{opt.options.length}}" />
nicholas@2853 161 </div>
nicholas@2853 162 <div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
nicholas@2853 163 <span>Minimum Value:</span>
nicholas@2853 164 <input type="number" ng-model="opt.min" />
nicholas@2853 165 </div>
nicholas@2853 166 <div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
nicholas@2853 167 <span>Maximum Value:</span>
nicholas@2853 168 <input type="number" ng-model="opt.max" />
nicholas@2853 169 </div>
nicholas@2853 170 <div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0">
nicholas@2853 171 <span>Video URL:</span>
nicholas@2853 172 <input type="text" ng-model="opt.url" />
nicholas@2853 173 </div>
nicholas@2853 174 </div>
nicholas@2853 175 <div class="node">
nicholas@2853 176 <h4>Statement</h4>
nicholas@2853 177 <textarea ng-model="opt.statement"></textarea>
nicholas@2853 178 </div>
nicholas@2853 179 <div class="node" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
nicholas@2853 180 <h4>Options</h4>
nicholas@2853 181 <div>
nicholas@2853 182 <button type="button" class="btn btn-default" ng-click="addOption();">Add Option</button>
nicholas@2853 183 </div>
nicholas@2853 184 <div class="node" ng-repeat="option in opt.options">
nicholas@2853 185 <div class="attributes">
nicholas@2853 186 <div class="attribute">
nicholas@2853 187 <button type="button" class="btn btn-default" ng-click="removeOption(option);">Remove</button>
nicholas@2853 188 </div>
nicholas@2853 189 <div class="attribute">
nicholas@2853 190 <span>Name: </span>
nicholas@2853 191 <input type="text" ng-model="option.name" />
nicholas@2853 192 </div>
nicholas@2853 193 <div class="attribute">
nicholas@2853 194 <span>Displayed Text: </span>
nicholas@2853 195 <input type="text" ng-model="option.text" />
nicholas@2853 196 </div>
nicholas@2853 197 </div>
nicholas@2853 198 </div>
nicholas@2853 199 </div>
nicholas@2853 200 </div>
nicholas@2853 201 </div>
nicholas@2853 202 <div id="globalpostsurvey" class="node">
nicholas@2853 203 <h2>Post Test Survey</h2>
nicholas@2853 204 <div class="node" ng-repeat="opt in specification.postTest.options" ng-controller="surveyOption">
nicholas@2853 205 <h3>Survey Entry</h3>
nicholas@2853 206 <div class="attributes">
nicholas@2853 207 <div class="attribute">
nicholas@2853 208 <span>Survey Type: </span>
nicholas@2853 209 <select ng-model="opt.type">
nicholas@2853 210 <option value="question">Question</option>
nicholas@2853 211 <option value="radio">Radio</option>
nicholas@2853 212 <option value="checkbox">Checkbox</option>
nicholas@2853 213 <option value="statement">Statement</option>
nicholas@2853 214 <option value="number">Number</option>
nicholas@2853 215 <option value="slider">Slider</option>
nicholas@2853 216 <option value="video">Video</option>
nicholas@2853 217 <option value="youtube">YouTube</option>
nicholas@2853 218 </select>
nicholas@2853 219 </div>
nicholas@2853 220 <div class="attribute">
nicholas@2853 221 <span>Unique Survey Entry ID:</span>
nicholas@2853 222 <input type="text" ng-model="opt.id" />
nicholas@2853 223 </div>
nicholas@2853 224 <div class="attribute">
nicholas@2853 225 <span>Entry Name:</span>
nicholas@2853 226 <input type="text" ng-model="opt.name" />
nicholas@2853 227 </div>
nicholas@2853 228 <div class="attribute" ng-show="['question', 'checkbox', 'radio', 'number'].indexOf(opt.type) >= 0">
nicholas@2853 229 <span>Mandatory:</span>
nicholas@2853 230 <input type="checkbox" ng-model="opt.mandatory" />
nicholas@2853 231 </div>
nicholas@2853 232 <div class="attribute">
nicholas@2853 233 <span>Minimum Wait Time (s):</span>
nicholas@2853 234 <input type="number" ng-model="opt.minWait" min="0" />
nicholas@2853 235 </div>
nicholas@2853 236 <div class="attribute" ng-show="opt.type == 'question'">
nicholas@2853 237 <span>Box Size:</span>
nicholas@2853 238 <select ng-model="opt.boxsize">
nicholas@2853 239 <option value="small">Small</option>
nicholas@2853 240 <option value="normal">Normal</option>
nicholas@2853 241 <option value="large">Large</option>
nicholas@2853 242 <option value="huge">Huge</option>
nicholas@2853 243 </select>
nicholas@2853 244 </div>
nicholas@2853 245 <div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
nicholas@2853 246 <span>Minimum Selected:</span>
nicholas@2853 247 <input type="number" ng-model="opt.min" min="0" />
nicholas@2853 248 </div>
nicholas@2853 249 <div class="attribute" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
nicholas@2853 250 <span>Maximum Selected:</span>
nicholas@2853 251 <input type="number" ng-model="opt.max" max="{{opt.options.length}}" />
nicholas@2853 252 </div>
nicholas@2853 253 <div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
nicholas@2853 254 <span>Minimum Value:</span>
nicholas@2853 255 <input type="number" ng-model="opt.min" />
nicholas@2853 256 </div>
nicholas@2853 257 <div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0">
nicholas@2853 258 <span>Maximum Value:</span>
nicholas@2853 259 <input type="number" ng-model="opt.max" />
nicholas@2853 260 </div>
nicholas@2853 261 <div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0">
nicholas@2853 262 <span>Video URL:</span>
nicholas@2853 263 <input type="text" ng-model="opt.url" />
nicholas@2853 264 </div>
nicholas@2853 265 </div>
nicholas@2853 266 <div class="node">
nicholas@2853 267 <h4>Statement</h4>
nicholas@2853 268 <textarea ng-model="opt.statement"></textarea>
nicholas@2853 269 </div>
nicholas@2853 270 <div class="node" ng-show="['checkbox', 'radio'].indexOf(opt.type) >= 0">
nicholas@2853 271 <h4>Options</h4>
nicholas@2853 272 <div>
nicholas@2853 273 <button type="button" class="btn btn-default" ng-click="addOption();">Add Option</button>
nicholas@2853 274 </div>
nicholas@2853 275 <div class="node" ng-repeat="option in opt.options">
nicholas@2853 276 <div class="attributes">
nicholas@2853 277 <div class="attribute">
nicholas@2853 278 <button type="button" class="btn btn-default" ng-click="removeOption(option);">Remove</button>
nicholas@2853 279 </div>
nicholas@2853 280 <div class="attribute">
nicholas@2853 281 <span>Name: </span>
nicholas@2853 282 <input type="text" ng-model="option.name" />
nicholas@2853 283 </div>
nicholas@2853 284 <div class="attribute">
nicholas@2853 285 <span>Displayed Text: </span>
nicholas@2853 286 <input type="text" ng-model="option.text" />
nicholas@2853 287 </div>
nicholas@2853 288 </div>
nicholas@2853 289 </div>
nicholas@2853 290 </div>
nicholas@2853 291 </div>
nicholas@2853 292 </div>
nicholas@2851 293 </div>
nicholas@2851 294 <div id="popupHolder" ng-show="popupVisible">
nicholas@2851 295 <div ng-controller="introduction" class="popup" ng-show="popupVisible">
nicholas@2851 296 <div class="popupTitle" ng-switch="state">
nicholas@2851 297 <span ng-switch-when="0">Test Creator</span>
nicholas@2851 298 <span ng-switch-when="1">Create New Test</span>
nicholas@2851 299 </div>
nicholas@2851 300 <div class="popupContent container-fluid" ng-switch="state">
nicholas@2851 301 <div ng-switch-when="0">
nicholas@2851 302 <div>
nicholas@2851 303 <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>
nicholas@2851 304 </div>
nicholas@2851 305 <div class="drag-drop" id="introdragdrop"><span>Upload XML here</span></div>
nicholas@2851 306 </div>
nicholas@2851 307 <div ng-switch-when="1">
nicholas@2851 308 <div>
nicholas@2851 309 <span>Please select the interface you would like to use below. Selecting an interface will give a brief description of the interface type.</span>
nicholas@2851 310 </div>
nicholas@2851 311 <div class="row">
nicholas@2851 312 <div class="col-md-6" style="overflow-y: scroll;height: 333px;">
nicholas@2851 313 <div class="new-test" ng-repeat="i in interfaces" ng-mouseover="mouseover(i.name)" ng-click="initialise(i.name)">
nicholas@2851 314 <label style="cursor:pointer">
nicholas@2851 315 <input type="radio" name="new-test" value="{{i.name}}" id="i.name" style="cursor:pointer" /> {{i.name}}
nicholas@2851 316 </label>
nicholas@2851 317 </div>
nicholas@2851 318 </div>
nicholas@2851 319 <div class="col-md-6">
nicholas@2851 320 <span>{{description}}</span>
nicholas@2851 321 </div>
nicholas@2851 322 </div>
nicholas@2851 323 </div>
nicholas@2851 324 </div>
nicholas@2851 325 <div class="popupButtons">
nicholas@2851 326 <button id="popupBack" type="button" class="btn btn-default" ng-show="state>0" ng-click="back()">Back</button>
nicholas@2851 327 <button id="popupNext" type="button" class="btn btn-default" ng-click="next()">Next</button>
nicholas@2851 328 </div>
nicholas@2851 329 </div>
nicholas@2851 330 </div>
nicholas@2851 331 <div id="screenblank" ng-show="popupVisible"></div>
nicholas@2851 332 </div>
nicholas@2224 333 </body>
nicholas@2538 334
nicholas@2224 335 </html>