Mercurial > hg > webaudioevaluationtool
view test_create.html @ 2853:f75db4482006
More test-creator work. Finished global surveys
author | Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk> |
---|---|
date | Wed, 26 Apr 2017 16:38:34 +0100 |
parents | d1cde8698cc6 |
children | 6625f4ad24f4 |
line wrap: on
line source
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- This defines the test creator tool for the Web Audio Evaluation Toolbox --> <link rel="stylesheet" type="text/css" href="test_create/style.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="js/jquery-2.1.4.js"></script> <script src="js/angular.min.js"></script> <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> <title>WAET 1.2.1 Test Creator</title> </head> <body> <div ng-app="creator" ng-controller="view"> <div id="pageRoot"> <h1>Web Audio Evaluation Tool - Test Creator</h1> </div> <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" /> </div> <div class="attribute"> <span>Save URL: </span> <input type="text" ng-model="specification.projectReturn" /> </div> <div class="attribute"> <span>Exit URL: </span> <input type="text" ng-model="specification.returnURL" /> </div> <div class="attribute"> <span>Randomise Page Order: </span> <input type="checkbox" ng-model="specification.randomiseOrder" /> </div> <div class="attribute"> <span>Page Pool Size: </span> <input type="number" ng-model="specification.poolSize" min="0" /> </div> <div class="attribute"> <span>Loudness Normalisation (LUFS): </span> <input type="number" ng-model="specification.loudness" max="0" /> </div> <div class="attribute"> <span>Fixed Sampling Rate: </span> <input type="number" ng-model="specification.sampleRate" min="0" /> </div> <div class="attribute"> <span>Pre-Test audio calibration: </span> <input type="checkbox" ng-model="specification.calibration" /> </div> <div class="attribute"> <span>Global Cross-fade time: </span> <input type="number" ng-model="specification.crossFade" min="0" step="0.1" /> </div> <div class="attribute"> <span>Global Fragment Pre-Silence: </span> <input type="number" ng-model="specification.preSilence" min="0" step="0.1" /> </div> <div class="attribute"> <span>Global Fragment Post-Silence: </span> <input type="number" ng-model="specification.preSilence" min="0" step="0.1" /> </div> <div class="attribute"> <span>Play audio one-at-a-time: </span> <input type="checkbox" ng-model="specification.playOne" /> </div> </div> <div class="node"> <h2>Test Completed Message</h2> <textarea ng-model="specification.exitText"></textarea> </div> <div id="metricsNode" class="node"> <h3>Session Metrics</h3> <div class="attributes"> <div class="attribute"> <span>Collect Total Test Time: </span> <input type="checkbox" value="testTimer" ng-click="enableMetric($event)" /> </div> <div class="attribute"> <span>Collect Fragment Listen Time: </span> <input type="checkbox" value="elementTimer" ng-click="enableMetric($event)" /> </div> <div class="attribute"> <span>Collect Fragment Initial Position: </span> <input type="checkbox" value="elementInitialPosition" ng-click="enableMetric($event)" /> </div> <div class="attribute"> <span>Collect Fragment Position over Time: </span> <input type="checkbox" value="elementTracker" ng-click="enableMetric($event)" /> </div> <div class="attribute"> <span>Collect Fragment Listened To Flag: </span> <input type="checkbox" value="elementFlagListenedTo" ng-click="enableMetric($event)" /> </div> <div class="attribute"> <span>Collect Fragment Moved Flag: </span> <input type="checkbox" value="elementFlagMoved" ng-click="enableMetric($event)" /> </div> <div class="attribute"> <span>Collect Fragment Listened Flag: </span> <input type="checkbox" value="elementListenTracker" ng-click="enableMetric($event)" /> </div> </div> </div> <div id="globalpresurvey" class="node"> <h2>Pre Test Survey</h2> <div class="node" ng-repeat="opt in specification.preTest.options" ng-controller="surveyOption"> <h3>Survey Entry</h3> <div class="attributes"> <div class="attribute"> <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="statement">Statement</option> <option value="number">Number</option> <option value="slider">Slider</option> <option value="video">Video</option> <option value="youtube">YouTube</option> </select> </div> <div class="attribute"> <span>Unique Survey Entry ID:</span> <input type="text" ng-model="opt.id" /> </div> <div class="attribute"> <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"> <span>Mandatory:</span> <input type="checkbox" ng-model="opt.mandatory" /> </div> <div class="attribute"> <span>Minimum Wait Time (s):</span> <input type="number" ng-model="opt.minWait" min="0" /> </div> <div class="attribute" ng-show="opt.type == 'question'"> <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"> <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"> <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"> <span>Minimum Value:</span> <input type="number" ng-model="opt.min" /> </div> <div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0"> <span>Maximum Value:</span> <input type="number" ng-model="opt.max" /> </div> <div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0"> <span>Video URL:</span> <input type="text" ng-model="opt.url" /> </div> </div> <div class="node"> <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> <button type="button" class="btn btn-default" ng-click="addOption();">Add Option</button> </div> <div class="node" ng-repeat="option in opt.options"> <div class="attributes"> <div class="attribute"> <button type="button" class="btn btn-default" ng-click="removeOption(option);">Remove</button> </div> <div class="attribute"> <span>Name: </span> <input type="text" ng-model="option.name" /> </div> <div class="attribute"> <span>Displayed Text: </span> <input type="text" ng-model="option.text" /> </div> </div> </div> </div> </div> </div> <div id="globalpostsurvey" class="node"> <h2>Post Test Survey</h2> <div class="node" ng-repeat="opt in specification.postTest.options" ng-controller="surveyOption"> <h3>Survey Entry</h3> <div class="attributes"> <div class="attribute"> <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="statement">Statement</option> <option value="number">Number</option> <option value="slider">Slider</option> <option value="video">Video</option> <option value="youtube">YouTube</option> </select> </div> <div class="attribute"> <span>Unique Survey Entry ID:</span> <input type="text" ng-model="opt.id" /> </div> <div class="attribute"> <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"> <span>Mandatory:</span> <input type="checkbox" ng-model="opt.mandatory" /> </div> <div class="attribute"> <span>Minimum Wait Time (s):</span> <input type="number" ng-model="opt.minWait" min="0" /> </div> <div class="attribute" ng-show="opt.type == 'question'"> <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"> <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"> <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"> <span>Minimum Value:</span> <input type="number" ng-model="opt.min" /> </div> <div class="attribute" ng-show="['slider', 'number'].indexOf(opt.type) >= 0"> <span>Maximum Value:</span> <input type="number" ng-model="opt.max" /> </div> <div class="attribute" ng-show="['video', 'youtube'].indexOf(opt.type) >= 0"> <span>Video URL:</span> <input type="text" ng-model="opt.url" /> </div> </div> <div class="node"> <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> <button type="button" class="btn btn-default" ng-click="addOption();">Add Option</button> </div> <div class="node" ng-repeat="option in opt.options"> <div class="attributes"> <div class="attribute"> <button type="button" class="btn btn-default" ng-click="removeOption(option);">Remove</button> </div> <div class="attribute"> <span>Name: </span> <input type="text" ng-model="option.name" /> </div> <div class="attribute"> <span>Displayed Text: </span> <input type="text" ng-model="option.text" /> </div> </div> </div> </div> </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="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> </div> <div class="drag-drop" id="introdragdrop"><span>Upload XML here</span></div> </div> <div ng-switch-when="1"> <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 interfaces" ng-mouseover="mouseover(i.name)" ng-click="initialise(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> <div class="col-md-6"> <span>{{description}}</span> </div> </div> </div> </div> <div class="popupButtons"> <button id="popupBack" type="button" class="btn btn-default" ng-show="state>0" ng-click="back()">Back</button> <button id="popupNext" type="button" class="btn btn-default" ng-click="next()">Next</button> </div> </div> </div> <div id="screenblank" ng-show="popupVisible"></div> </div> </body> </html>