Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 753:66d732c2bc14

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Index page now links to example APE project, example MUSHRA project, test creator, analysis page, citing info, GNU license, and instructions. Instructions and example project contain info on checkboxes.
author Brecht De Man <BrechtDeMan@users.noreply.github.com>
date Fri, 18 Dec 2015 18:26:46 +0000
parents
children babd5366db49 888292c88c33
rev   line source
BrechtDeMan@753 1 <!DOCTYPE html>
BrechtDeMan@753 2 <html lang="en">
BrechtDeMan@753 3 <head>
BrechtDeMan@753 4 <meta charset="utf-8">
BrechtDeMan@753 5
BrechtDeMan@753 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
BrechtDeMan@753 7 Remove this if you use the .htaccess -->
BrechtDeMan@753 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
BrechtDeMan@753 9
BrechtDeMan@753 10 <title>Analysis</title>
BrechtDeMan@753 11 <meta name="description" content="Show results from subjective evaluation">
BrechtDeMan@753 12 <meta name="author" content="Brecht De Man">
BrechtDeMan@753 13
BrechtDeMan@753 14 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
BrechtDeMan@753 15 <script type="text/javascript">
BrechtDeMan@753 16 // To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
BrechtDeMan@753 17
BrechtDeMan@753 18 //google.load("visualization", "1", {packages:["corechart"]});
BrechtDeMan@753 19
BrechtDeMan@753 20 /*************
BrechtDeMan@753 21 * SETUP *
BrechtDeMan@753 22 *************/
BrechtDeMan@753 23 // folder where to find the XML files
BrechtDeMan@753 24 xmlFileFolder = "analysis_test";
BrechtDeMan@753 25 // array of XML files
BrechtDeMan@753 26 var xmlFiles = ['McG-A-2013-09.xml', 'McG-A-2014-03.xml', 'McG-A-2014-12.xml', 'McG-B-2013-09.xml',
BrechtDeMan@753 27 'McG-B-2014-03.xml', 'McG-B-2014-12.xml', 'McG-C-2013-09.xml', 'McG-C-2014-03.xml', 'McG-C-2014-12.xml',
BrechtDeMan@753 28 'McG-D-2013-09.xml', 'McG-D-2014-03.xml', 'McG-D-2014-12.xml', 'McG-E-2013-09.xml', 'McG-E-2014-03.xml',
BrechtDeMan@753 29 'McG-E-2014-12.xml', 'McG-F-2013-09.xml', 'McG-F-2014-03.xml', 'McG-F-2014-12.xml', 'McG-G-2014-03.xml',
BrechtDeMan@753 30 'McG-G-2014-12.xml', 'McG-H-2013-09.xml', 'McG-H-2014-03.xml', 'McG-H-2014-12.xml', 'McG-I-2013-09.xml',
BrechtDeMan@753 31 'McG-I-2014-03.xml', 'McG-J-2013-09.xml', 'McG-J-2014-03.xml', 'McG-K-2013-09.xml', 'McG-K-2014-03.xml',
BrechtDeMan@753 32 'McG-L-2013-09.xml', 'McG-L-2014-03.xml', 'McG-M-2013-09.xml', 'McG-M-2014-03.xml', 'McG-N-2013-09.xml',
BrechtDeMan@753 33 'McG-N-2014-03.xml', 'McG-O-2013-09.xml', 'McG-O-2014-03.xml', 'McG-P-2013-09.xml', 'McG-P-2014-03.xml',
BrechtDeMan@753 34 'McG-pro1-2013-09.xml', 'McG-pro1-2014-03.xml', 'McG-pro1-2014-12.xml', 'McG-pro2-2013-09.xml',
BrechtDeMan@753 35 'McG-pro2-2014-03.xml', 'McG-pro2-2014-12.xml', 'McG-Q-2014-12.xml', 'McG-R-2014-12.xml',
BrechtDeMan@753 36 'McG-S-2014-12.xml', 'McG-subA-2013-09.xml', 'McG-subA-2014-03.xml', 'McG-subB-2014-03.xml',
BrechtDeMan@753 37 'McG-subB-2014-12.xml', 'McG-subC-2013-09.xml', 'McG-subC-2014-03.xml', 'McG-subC-2014-12.xml',
BrechtDeMan@753 38 'McG-subD-2013-09.xml', 'McG-subD-2014-12.xml', 'McG-subE-2014-12.xml', 'McG-subG-2014-12.xml',
BrechtDeMan@753 39 'McG-subH-2013-09.xml', 'McG-T-2014-12.xml', 'McG-U-2014-12.xml', 'McG-V-2014-12.xml',
BrechtDeMan@753 40 'McG-W-2014-12.xml', 'McG-X-2014-12.xml', 'MG1-2013-09.xml', 'MG2-2013-09.xml', 'MG3-2013-09.xml',
BrechtDeMan@753 41 'MG4-2013-09.xml', 'MG5-2013-09.xml', 'MG6-2013-09.xml', 'MG7-2013-09.xml', 'MG8-2013-09.xml',
BrechtDeMan@753 42 'MG9-2013-09.xml', 'QM-1-1.xml', 'QM-1-2.xml', 'QM-10-1.xml', 'QM-11-1.xml', 'QM-11-2.xml', 'QM-12-1.xml', 'QM-12-2.xml',
BrechtDeMan@753 43 'QM-13-1.xml', 'QM-14-1.xml', 'QM-15-1.xml', 'QM-16-1.xml', 'QM-17-1.xml', 'QM-18-1.xml', 'QM-18-2.xml',
BrechtDeMan@753 44 'QM-18-3.xml', 'QM-19-1.xml', 'QM-2-1.xml', 'QM-2-2.xml', 'QM-2-3.xml', 'QM-20-1.xml', 'QM-20-2.xml',
BrechtDeMan@753 45 'QM-20-3.xml', 'QM-21-1.xml', 'QM-21-2.xml', 'QM-3-1.xml', 'QM-3-2.xml', 'QM-3-3.xml', 'QM-4-1.xml', 'QM-5-1.xml',
BrechtDeMan@753 46 'QM-5-2.xml', 'QM-6-1.xml', 'QM-6-2.xml', 'QM-7-1.xml', 'QM-7-2.xml', 'QM-8-1.xml', 'QM-9-1.xml',
BrechtDeMan@753 47 'PXL-L1.xml','PXL-L2.xml','PXL-L3.xml','PXL-L4.xml','PXL-L5.xml','PXL-S1.xml','PXL-S2.xml','PXL-S3.xml',
BrechtDeMan@753 48 'PXL-S4.xml','PXL-S5.xml','PXL-S6.xml','PXL-S7.xml','PXL-pro.xml','DU-A1.xml','DU-A2.xml','DU-B1.xml',
BrechtDeMan@753 49 'DU-B2.xml','DU-C1.xml','DU-C2.xml','DU-D1.xml','DU-D2.xml','DU-E1.xml','DU-F1.xml','DU-F2.xml','DU-G1.xml',
BrechtDeMan@753 50 'DU-G2.xml','DU-H1.xml','DU-H2.xml','DU-I2.xml','DU-J2.xml','DU-K1.xml','DU-K2.xml','DU-L1.xml','DU-L2.xml',
BrechtDeMan@753 51 'DU-M1.xml','DU-M2.xml','DU-N1.xml','DU-O1.xml','DU-O2.xml','DU-P1.xml','DU-P2.xml','DU-Q1.xml','DU-Q2.xml',
BrechtDeMan@753 52 'DU-R1.xml','DU-R2.xml','DU-S1.xml','DU-S2.xml','DU-T1.xml','DU-T2.xml','DU-U1.xml','DU-U2.xml','DU-U3.xml'];
BrechtDeMan@753 53 //['QM-1-1.xml','QM-2-1.xml','QM-2-2.xml','QM-2-3.xml','QM-3-1.xml','QM-3-2.xml','QM-4-1.xml','QM-5-1.xml','QM-5-2.xml','QM-6-1.xml','QM-6-2.xml','QM-7-1.xml','QM-7-2.xml','QM-8-1.xml','QM-9-1.xml','QM-10-1.xml','QM-11-1.xml','QM-12-1.xml','QM-12-2.xml','QM-13-1.xml','QM-14-1.xml','QM-15-1.xml','QM-16-1.xml','QM-17-1.xml','QM-18-1.xml','QM-18-2.xml','QM-18-3.xml','QM-19-1.xml','QM-20-1.xml','QM-20-2.xml','QM-20-3.xml','QM-21-1.xml','QM-21-2.xml'];
BrechtDeMan@753 54 //['McG-A-2014-03.xml','McG-B-2014-03.xml','McG-C-2014-03.xml','McG-D-2014-03.xml','McG-E-2014-03.xml','McG-F-2014-03.xml','McG-G-2014-03.xml','McG-H-2014-03.xml'];
BrechtDeMan@753 55
BrechtDeMan@753 56 //TODO: make retrieval of file names automatic / drag files on here
BrechtDeMan@753 57
BrechtDeMan@753 58 /****************
BrechtDeMan@753 59 * VARIABLES *
BrechtDeMan@753 60 ****************/
BrechtDeMan@753 61
BrechtDeMan@753 62 // Counters
BrechtDeMan@753 63 // How many files, audioholders, audioelementes and statements annotated (don't count current one)
BrechtDeMan@753 64 var numberOfFiles = -1;
BrechtDeMan@753 65 var numberOfaudioholders = -1;
BrechtDeMan@753 66 var numberOfaudioelementes = -1;
BrechtDeMan@753 67 var numberOfStatements = -1;
BrechtDeMan@753 68 var numberOfSkippedComments = 0;
BrechtDeMan@753 69
BrechtDeMan@753 70 // Object arrays
BrechtDeMan@753 71 var fileNameArray = [];
BrechtDeMan@753 72 var subjectArray = [];
BrechtDeMan@753 73 var audioholderArray = [];
BrechtDeMan@753 74 var audioelementArray = [];
BrechtDeMan@753 75
BrechtDeMan@753 76 // End of (file, audioholder, audioelement) flags
BrechtDeMan@753 77 var newFile = true;
BrechtDeMan@753 78 var newAudioHolder = true;
BrechtDeMan@753 79 var newAudioElement = true;
BrechtDeMan@753 80
BrechtDeMan@753 81 var fileCounter = 0; // file index
BrechtDeMan@753 82 var audioholderCounter=0; // audioholder index (current XML file)
BrechtDeMan@753 83 var audioelementCounter=0; // audioelement index (current audioholder)
BrechtDeMan@753 84 var statementNumber=0; // total number of statements
BrechtDeMan@753 85
BrechtDeMan@753 86 var root; // root of XML file
BrechtDeMan@753 87 var commentInFull = ''; // full comment
BrechtDeMan@753 88
BrechtDeMan@753 89 var playAudio = true; // whether corresponding audio should be played back
BrechtDeMan@753 90
BrechtDeMan@753 91 // // Measuring time
BrechtDeMan@753 92 // var lastTimeMeasured = -1; //
BrechtDeMan@753 93 // var durationLastAnnotation = -1; // duration of last annotation
BrechtDeMan@753 94 // var timeArray = [];
BrechtDeMan@753 95 // var MIN_TIME = 1.0; // minimum time counted as significant
BrechtDeMan@753 96 // var measurementPaused = false; // whether time measurement is paused
BrechtDeMan@753 97 // var timeInBuffer = 0; //
BrechtDeMan@753 98
BrechtDeMan@753 99 var topLevel;
BrechtDeMan@753 100 window.onload = function() {
BrechtDeMan@753 101 // Initialise page
BrechtDeMan@753 102 topLevel = document.getElementById('topLevelBody');
BrechtDeMan@753 103 var setup = document.createElement('div');
BrechtDeMan@753 104 setup.id = 'setupTagDiv';
BrechtDeMan@753 105 loadAllFiles();
BrechtDeMan@753 106 printSurveyData()
BrechtDeMan@753 107 //makePlots();
BrechtDeMan@753 108 // measure time at this point:
BrechtDeMan@753 109 lastTimeMeasured = new Date().getTime(); // in milliseconds
BrechtDeMan@753 110 };
BrechtDeMan@753 111
BrechtDeMan@753 112 // Assert function
BrechtDeMan@753 113 function assert(condition, message) {
BrechtDeMan@753 114 if (!condition) {
BrechtDeMan@753 115 message = message || "Assertion failed";
BrechtDeMan@753 116 if (typeof Error !== "undefined") {
BrechtDeMan@753 117 throw new Error(message);
BrechtDeMan@753 118 }
BrechtDeMan@753 119 throw message; // Fallback
BrechtDeMan@753 120 }
BrechtDeMan@753 121 }
BrechtDeMan@753 122
BrechtDeMan@753 123 function median(values) { // TODO: replace code by '50th percentile' - should be the same?
BrechtDeMan@753 124 values.sort( function(a,b) {return a - b;} );
BrechtDeMan@753 125 var half = Math.floor(values.length/2);
BrechtDeMan@753 126 if(values.length % 2)
BrechtDeMan@753 127 return values[half];
BrechtDeMan@753 128 else
BrechtDeMan@753 129 return (values[half-1] + values[half]) / 2.0;
BrechtDeMan@753 130 }
BrechtDeMan@753 131
BrechtDeMan@753 132 function percentile(values, n) {
BrechtDeMan@753 133 values.sort( function(a,b) {return a - b;} );
BrechtDeMan@753 134 // get ordinal rank
BrechtDeMan@753 135 var rank = Math.min(Math.floor(values.length*n/100), values.length-1);
BrechtDeMan@753 136 return values[rank];
BrechtDeMan@753 137 }
BrechtDeMan@753 138
BrechtDeMan@753 139 /***********************
BrechtDeMan@753 140 * TIME MEASUREMENT *
BrechtDeMan@753 141 ************************/
BrechtDeMan@753 142
BrechtDeMan@753 143 // measure time since last time this function was called
BrechtDeMan@753 144 function timeSinceLastCall() {
BrechtDeMan@753 145 // current time
BrechtDeMan@753 146 var currentTime = new Date().getTime();
BrechtDeMan@753 147 // calculate time difference
BrechtDeMan@753 148 var timeDifference = currentTime - lastTimeMeasured + timeInBuffer;
BrechtDeMan@753 149 // clear buffer (for pausing)
BrechtDeMan@753 150 timeInBuffer = 0;
BrechtDeMan@753 151 // remember last measured time
BrechtDeMan@753 152 lastTimeMeasured = currentTime;
BrechtDeMan@753 153 return timeDifference;
BrechtDeMan@753 154 }
BrechtDeMan@753 155
BrechtDeMan@753 156 // pause time measurement
BrechtDeMan@753 157 function pauseTimeMeasurement() {
BrechtDeMan@753 158 // UN-PAUSE
BrechtDeMan@753 159 if (measurementPaused) { // already paused
BrechtDeMan@753 160 // button shows 'pause' again
BrechtDeMan@753 161 document.getElementById('pauseButton').innerHTML = 'Pause';
BrechtDeMan@753 162 // toggle state
BrechtDeMan@753 163 measurementPaused = false;
BrechtDeMan@753 164 // resume time measurement
BrechtDeMan@753 165 lastTimeMeasured = new Date().getTime(); // reset time, discard time while paused
BrechtDeMan@753 166 } else { // PAUSE
BrechtDeMan@753 167 // button shows 'resume'
BrechtDeMan@753 168 document.getElementById('pauseButton').innerHTML = 'Resume';
BrechtDeMan@753 169 // toggle state
BrechtDeMan@753 170 measurementPaused = true;
BrechtDeMan@753 171 // pause time measurement
BrechtDeMan@753 172 timeInBuffer = timeSinceLastCall();
BrechtDeMan@753 173 }
BrechtDeMan@753 174 }
BrechtDeMan@753 175
BrechtDeMan@753 176 // show elapsed time on interface
BrechtDeMan@753 177 function showTimeElapsedInSeconds() {
BrechtDeMan@753 178 // if paused: un-pause
BrechtDeMan@753 179 if (measurementPaused) {
BrechtDeMan@753 180 pauseTimeMeasurement();
BrechtDeMan@753 181 }
BrechtDeMan@753 182
BrechtDeMan@753 183 // time of last annotation
BrechtDeMan@753 184 var lastAnnotationTime = timeSinceLastCall()/1000;
BrechtDeMan@753 185 document.getElementById('timeDisplay').innerHTML = lastAnnotationTime.toFixed(2);
BrechtDeMan@753 186 // average time over last ... annotations
BrechtDeMan@753 187 var avgAnnotationTime;
BrechtDeMan@753 188 var numberOfElementsToAverage =
BrechtDeMan@753 189 document.getElementById('numberOfTimeAverages').value;
BrechtDeMan@753 190 if (isPositiveInteger(numberOfElementsToAverage)) {
BrechtDeMan@753 191 avgAnnotationTime =
BrechtDeMan@753 192 calculateAverageTime(lastAnnotationTime,
BrechtDeMan@753 193 Number(numberOfElementsToAverage));
BrechtDeMan@753 194 } else {
BrechtDeMan@753 195 // change text field content to 'ALL'
BrechtDeMan@753 196 document.getElementById('numberOfTimeAverages').value = 'ALL';
BrechtDeMan@753 197 avgAnnotationTime = calculateAverageTime(lastAnnotationTime, -1);
BrechtDeMan@753 198 }
BrechtDeMan@753 199 document.getElementById('timeAverageDisplay').innerHTML = avgAnnotationTime.toFixed(2);
BrechtDeMan@753 200 }
BrechtDeMan@753 201
BrechtDeMan@753 202 // auxiliary function: is string a positive integer?
BrechtDeMan@753 203 // http://stackoverflow.com/questions/10834796/...
BrechtDeMan@753 204 // validate-that-a-string-is-a-positive-integer
BrechtDeMan@753 205 function isPositiveInteger(str) {
BrechtDeMan@753 206 var n = ~~Number(str);
BrechtDeMan@753 207 return String(n) === str && n >= 0;
BrechtDeMan@753 208 }
BrechtDeMan@753 209
BrechtDeMan@753 210 // calculate average time
BrechtDeMan@753 211 function calculateAverageTime(newTimeMeasurementInSeconds,numberOfPoints) {
BrechtDeMan@753 212 // append last measurement time to time array, if significant
BrechtDeMan@753 213 if (newTimeMeasurementInSeconds > MIN_TIME) {
BrechtDeMan@753 214 timeArray.push(newTimeMeasurementInSeconds);
BrechtDeMan@753 215 }
BrechtDeMan@753 216 // average over last N elements of this array
BrechtDeMan@753 217 if (numberOfPoints < 0 || numberOfPoints>=timeArray.length) { // calculate average over all
BrechtDeMan@753 218 var sum = 0;
BrechtDeMan@753 219 for (var i = 0; i < timeArray.length; i++) {
BrechtDeMan@753 220 sum += timeArray[i];
BrechtDeMan@753 221 }
BrechtDeMan@753 222 averageOfTimes = sum/timeArray.length;
BrechtDeMan@753 223 } else { // calculate average over specified number of times measured last
BrechtDeMan@753 224 var sum = 0;
BrechtDeMan@753 225 for (var i = timeArray.length-numberOfPoints; i < timeArray.length; i++) {
BrechtDeMan@753 226 sum += timeArray[i];
BrechtDeMan@753 227 }
BrechtDeMan@753 228 averageOfTimes = sum/numberOfPoints;
BrechtDeMan@753 229 }
BrechtDeMan@753 230 return averageOfTimes;
BrechtDeMan@753 231 }
BrechtDeMan@753 232
BrechtDeMan@753 233
BrechtDeMan@753 234 /********************************
BrechtDeMan@753 235 * PLAYBACK OF AUDIO *
BrechtDeMan@753 236 ********************************/
BrechtDeMan@753 237
BrechtDeMan@753 238 //PLAYaudioelement
BrechtDeMan@753 239 // Keep track of whether audio should be played
BrechtDeMan@753 240 function playFlagChanged(){
BrechtDeMan@753 241 playAudio = playFlag.checked; // global variable
BrechtDeMan@753 242
BrechtDeMan@753 243 if (!playAudio){ // if audio needs to stop
BrechtDeMan@753 244 audio.pause(); // stop audio - if anything is playing
BrechtDeMan@753 245 currently_playing = ''; // back to empty string so playaudioelement knows nothing's playing
BrechtDeMan@753 246 }
BrechtDeMan@753 247 }
BrechtDeMan@753 248
BrechtDeMan@753 249 // audioholder that's currently playing
BrechtDeMan@753 250 var currently_playing_audioholder = ''; // at first: empty string
BrechtDeMan@753 251 var currently_playing_audioelement = '';
BrechtDeMan@753 252 var audio;
BrechtDeMan@753 253
BrechtDeMan@753 254 // Play audioelement of audioholder if available, from start or from same position
BrechtDeMan@753 255 function playaudioelement(audioholderName, audioelementerName){
BrechtDeMan@753 256 if (playAudio) { // if enabled
BrechtDeMan@753 257 // get corresponding file from folder
BrechtDeMan@753 258 var file_location = 'audio/'+audioholderName + '/' + audioelementerName + '.mp3'; // fixed path and file name format
BrechtDeMan@753 259
BrechtDeMan@753 260 // if not available, show error/warning message
BrechtDeMan@753 261 //TODO ...
BrechtDeMan@753 262
BrechtDeMan@753 263 // if nothing playing yet, start playing
BrechtDeMan@753 264 if (currently_playing_audioholder == ''){ // signal that nothing is playing
BrechtDeMan@753 265 //playSound(audioBuffer);
BrechtDeMan@753 266 audio = new Audio(file_location);
BrechtDeMan@753 267 audio.loop = true; // loop when end is reached
BrechtDeMan@753 268 audio.play();
BrechtDeMan@753 269 currently_playing_audioholder = audioholderName;
BrechtDeMan@753 270 currently_playing_audioelement = audioelementerName;
BrechtDeMan@753 271 } else if (currently_playing_audioholder != audioholderName) {
BrechtDeMan@753 272 // if different audioholder playing, stop that and start playing
BrechtDeMan@753 273 audio.pause(); // stop audio
BrechtDeMan@753 274 audio = new Audio(file_location); // load new file
BrechtDeMan@753 275 audio.loop = true; // loop when end is reached
BrechtDeMan@753 276 audio.play(); // play audio from the start
BrechtDeMan@753 277 currently_playing_audioholder = audioholderName;
BrechtDeMan@753 278 currently_playing_audioelement = audioelementerName;
BrechtDeMan@753 279 } else if (currently_playing_audioelement != audioelementerName) {
BrechtDeMan@753 280 // if same audioholder playing, start playing from where it left off
BrechtDeMan@753 281 skipTime = audio.currentTime; // time to skip to
BrechtDeMan@753 282 audio.pause(); // stop audio
BrechtDeMan@753 283 audio = new Audio(file_location);
BrechtDeMan@753 284 audio.addEventListener('loadedmetadata', function() {
BrechtDeMan@753 285 this.currentTime = skipTime;
BrechtDeMan@753 286 console.log('Loaded '+audioholderName+'-'+audioelementerName+', playing from '+skipTime);
BrechtDeMan@753 287 }, false); // skip to same time when audio is loaded!
BrechtDeMan@753 288 audio.loop = true; // loop when end is reached
BrechtDeMan@753 289 audio.play(); // play from that time
BrechtDeMan@753 290 audio.currentTime = skipTime;
BrechtDeMan@753 291 currently_playing_audioholder = audioholderName;
BrechtDeMan@753 292 currently_playing_audioelement = audioelementerName;
BrechtDeMan@753 293 }
BrechtDeMan@753 294 // if same audioelement playing: keep on playing (i.e. do nothing)
BrechtDeMan@753 295 }
BrechtDeMan@753 296 }
BrechtDeMan@753 297
BrechtDeMan@753 298 /********************
BrechtDeMan@753 299 * READING FILES *
BrechtDeMan@753 300 ********************/
BrechtDeMan@753 301
BrechtDeMan@753 302 // Read necessary data from XML file
BrechtDeMan@753 303 function readXML(xmlFileName){
BrechtDeMan@753 304 if (window.XMLHttpRequest)
BrechtDeMan@753 305 {// code for IE7+, Firefox, Chrome, Opera, Safari
BrechtDeMan@753 306 xmlhttp=new XMLHttpRequest();
BrechtDeMan@753 307 }
BrechtDeMan@753 308 else
BrechtDeMan@753 309 {// code for IE6, IE5
BrechtDeMan@753 310 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
BrechtDeMan@753 311 }
BrechtDeMan@753 312 xmlhttp.open("GET",xmlFileName,false);
BrechtDeMan@753 313 xmlhttp.send();
BrechtDeMan@753 314 return xmlhttp.responseXML;
BrechtDeMan@753 315 }
BrechtDeMan@753 316
BrechtDeMan@753 317 // go over all files and compute relevant statistics
BrechtDeMan@753 318 function loadAllFiles() {
BrechtDeMan@753 319 // retrieve information from XMLs
BrechtDeMan@753 320
BrechtDeMan@753 321 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
BrechtDeMan@753 322 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
BrechtDeMan@753 323 xml = readXML(xmlFileName);
BrechtDeMan@753 324 if (xml != null) { // if file exists
BrechtDeMan@753 325 // append file name to array of file names
BrechtDeMan@753 326 fileNameArray.push(xmlFiles[fileIndex]);
BrechtDeMan@753 327
BrechtDeMan@753 328 // get root of XML file
BrechtDeMan@753 329 root = xml.getElementsByTagName('browserevaluationresult')[0];
BrechtDeMan@753 330
BrechtDeMan@753 331 // get subject ID, add to array if not already there
BrechtDeMan@753 332 pretest = root.getElementsByTagName('pretest')[0];
BrechtDeMan@753 333 subjectID = pretest.getElementsByTagName('comment')[0];
BrechtDeMan@753 334 if (subjectID){
BrechtDeMan@753 335 if (subjectID.getAttribute('id')!='sessionId') { // warning in console when not available
BrechtDeMan@753 336 console.log(xmlFiles[fileIndex]+': no SessionID available');
BrechtDeMan@753 337 }
BrechtDeMan@753 338 if (subjectArray.indexOf(subjectID.textContent) == -1) { // if not already in array
BrechtDeMan@753 339 subjectArray.push(subjectID.textContent); // append to array
BrechtDeMan@753 340 }
BrechtDeMan@753 341 }
BrechtDeMan@753 342
BrechtDeMan@753 343 // go over all audioholders, add to array if not already there
BrechtDeMan@753 344 audioholderNodes = root.getElementsByTagName('audioholder');
BrechtDeMan@753 345 // go over audioholderNodes and append audioholder name when not present yet
BrechtDeMan@753 346 for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length; audioholderIndex++) {
BrechtDeMan@753 347 audioholderName = audioholderNodes[audioholderIndex].getAttribute('id');
BrechtDeMan@753 348 if (audioholderArray.indexOf(audioholderName) == -1) { // if not already in array
BrechtDeMan@753 349 audioholderArray.push(audioholderName); // append to array
BrechtDeMan@753 350 }
BrechtDeMan@753 351 // within each audioholder, go over all audioelement IDs, add to array if not already there
BrechtDeMan@753 352 audioelementNodes = audioholderNodes[audioholderIndex].getElementsByTagName('audioelement');
BrechtDeMan@753 353 for (audioelementIndex = 0; audioelementIndex < audioelementNodes.length; audioelementIndex++) {
BrechtDeMan@753 354 audioelementName = audioelementNodes[audioelementIndex].getAttribute('id');
BrechtDeMan@753 355 if (audioelementArray.indexOf(audioelementName) == -1) { // if not already in array
BrechtDeMan@753 356 audioelementArray.push(audioelementName); // append to array
BrechtDeMan@753 357 }
BrechtDeMan@753 358 }
BrechtDeMan@753 359 }
BrechtDeMan@753 360 // count occurrences of each audioholder
BrechtDeMan@753 361 // ...
BrechtDeMan@753 362 }
BrechtDeMan@753 363 else {
BrechtDeMan@753 364 console.log('XML file '+xmlFileName+' not found.');
BrechtDeMan@753 365 }
BrechtDeMan@753 366 }
BrechtDeMan@753 367
BrechtDeMan@753 368 // sort alphabetically
BrechtDeMan@753 369 fileNameArray.sort();
BrechtDeMan@753 370 subjectArray.sort();
BrechtDeMan@753 371 audioholderArray.sort();
BrechtDeMan@753 372 audioelementArray.sort();
BrechtDeMan@753 373
BrechtDeMan@753 374 // display all information in HTML
BrechtDeMan@753 375 // show XML file folder
BrechtDeMan@753 376 document.getElementById('xmlFileFolder_span').innerHTML = "\""+xmlFileFolder+"/\"";
BrechtDeMan@753 377 // show number of files
BrechtDeMan@753 378 document.getElementById('numberOfFiles_span').innerHTML = fileNameArray.length;
BrechtDeMan@753 379 // show list of subject names
BrechtDeMan@753 380 document.getElementById('subjectArray_span').innerHTML = subjectArray.toString();
BrechtDeMan@753 381 // show list of audioholders
BrechtDeMan@753 382 document.getElementById('audioholderArray_span').innerHTML = audioholderArray.toString();
BrechtDeMan@753 383 // show list of audioelementes
BrechtDeMan@753 384 document.getElementById('audioelementArray_span').innerHTML = audioelementArray.toString();
BrechtDeMan@753 385 }
BrechtDeMan@753 386
BrechtDeMan@753 387 function printSurveyData() {
BrechtDeMan@753 388 // print some fields from the survey for different people
BrechtDeMan@753 389
BrechtDeMan@753 390 // go over all XML files
BrechtDeMan@753 391 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
BrechtDeMan@753 392 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
BrechtDeMan@753 393 xml = readXML(xmlFileName);
BrechtDeMan@753 394 // make a div
BrechtDeMan@753 395 var div = document.createElement('div');
BrechtDeMan@753 396 document.body.appendChild(div);
BrechtDeMan@753 397 div.id = 'div_survey_'+xmlFileName;
BrechtDeMan@753 398 div.style.width = '1100px';
BrechtDeMan@753 399 //div.style.height = '350px';
BrechtDeMan@753 400
BrechtDeMan@753 401 // title for that div (subject id)
BrechtDeMan@753 402 document.getElementById('div_survey_'+xmlFileName).innerHTML = '<h2>'+xmlFileName+'</h2>';
BrechtDeMan@753 403
BrechtDeMan@753 404 // which songs did they do
BrechtDeMan@753 405 if (xml != null) { // if file exists
BrechtDeMan@753 406 // get root of XML file
BrechtDeMan@753 407 root = xml.getElementsByTagName('browserevaluationresult')[0];
BrechtDeMan@753 408 // go over all audioholders
BrechtDeMan@753 409 // document.getElementById('div_survey_'+xmlFileName).innerHTML += '<strong>Audioholders: </strong>';
BrechtDeMan@753 410 // audioholderNodes = root.getElementsByTagName('audioholder');
BrechtDeMan@753 411 // for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length-1; audioholderIndex++) {
BrechtDeMan@753 412 // document.getElementById('div_survey_'+xmlFileName).innerHTML += audioholderNodes[audioholderIndex].getAttribute('id')+', ';
BrechtDeMan@753 413 // }
BrechtDeMan@753 414 // document.getElementById('div_survey_'+xmlFileName).innerHTML += audioholderNodes[audioholderNodes.length-1].getAttribute('id');
BrechtDeMan@753 415
BrechtDeMan@753 416 // survey responses (each if available)
BrechtDeMan@753 417 // get posttest node for total test
BrechtDeMan@753 418 childNodes = root.childNodes;
BrechtDeMan@753 419 posttestnode = null;
BrechtDeMan@753 420 for (idx = 0; idx < childNodes.length; idx++){
BrechtDeMan@753 421 if (childNodes[childNodes.length-idx-1].tagName == 'posttest') {
BrechtDeMan@753 422 posttestnode = childNodes[childNodes.length-idx-1];
BrechtDeMan@753 423 break;
BrechtDeMan@753 424 }
BrechtDeMan@753 425 }
BrechtDeMan@753 426
BrechtDeMan@753 427 // mix experience
BrechtDeMan@753 428 if (posttestnode) {
BrechtDeMan@753 429 posttestcomments = posttestnode.getElementsByTagName('comment');
BrechtDeMan@753 430 for (idx=0; idx < posttestcomments.length; idx++){
BrechtDeMan@753 431 commentsToPrint = ['generalExperience', 'interfaceExperience'];
BrechtDeMan@753 432 idAttribute = posttestcomments[idx].getAttribute('id');
BrechtDeMan@753 433 if (commentsToPrint.indexOf(idAttribute) >= 0) { // if exists?
BrechtDeMan@753 434 document.getElementById('div_survey_'+xmlFileName).innerHTML += '<br><strong>'+idAttribute+': </strong>'+posttestcomments[idx].textContent;
BrechtDeMan@753 435 }
BrechtDeMan@753 436 }
BrechtDeMan@753 437 }
BrechtDeMan@753 438 }
BrechtDeMan@753 439 }
BrechtDeMan@753 440 }
BrechtDeMan@753 441
BrechtDeMan@753 442 function makePlots() { //TODO: split into different functions
BrechtDeMan@753 443 // TEMPORARY
BrechtDeMan@753 444 makeTimeline(xmlFileFolder+"/"+xmlFiles[7]);
BrechtDeMan@753 445
BrechtDeMan@753 446 // create value array
BrechtDeMan@753 447 var ratings = []; // 3D matrix of ratings (audioholder, audioelement, subject)
BrechtDeMan@753 448 for (audioholderIndex = 0; audioholderIndex < audioholderArray.length; audioholderIndex++) {
BrechtDeMan@753 449 ratings.push([]);
BrechtDeMan@753 450 for (audioelementIndex = 0; audioelementIndex < audioelementArray.length; audioelementIndex++) {
BrechtDeMan@753 451 ratings[audioholderIndex].push([]);
BrechtDeMan@753 452 }
BrechtDeMan@753 453 }
BrechtDeMan@753 454
BrechtDeMan@753 455 // go over all XML files
BrechtDeMan@753 456 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
BrechtDeMan@753 457 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
BrechtDeMan@753 458 xml = readXML(xmlFileName);
BrechtDeMan@753 459 if (xml != null) { // if file exists
BrechtDeMan@753 460 // get root of XML file
BrechtDeMan@753 461 root = xml.getElementsByTagName('browserevaluationresult')[0];
BrechtDeMan@753 462 // go over all audioholders
BrechtDeMan@753 463 audioholderNodes = root.getElementsByTagName('audioholder');
BrechtDeMan@753 464 for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length; audioholderIndex++) {
BrechtDeMan@753 465 audioholderName = audioholderNodes[audioholderIndex].getAttribute('id');
BrechtDeMan@753 466 audioelementNodes = audioholderNodes[audioholderIndex].getElementsByTagName('audioelement');
BrechtDeMan@753 467 // go over all audioelements
BrechtDeMan@753 468 for (audioelementIndex = 0; audioelementIndex < audioelementNodes.length; audioelementIndex++) {
BrechtDeMan@753 469 audioelementName = audioelementNodes[audioelementIndex].getAttribute('id');
BrechtDeMan@753 470 // get value
BrechtDeMan@753 471 var value = audioelementNodes[audioelementIndex].getElementsByTagName("value")[0].textContent;
BrechtDeMan@753 472 if (value) { // if not empty, null, undefined...
BrechtDeMan@753 473 ratingValue = parseFloat(value);
BrechtDeMan@753 474 // add to matrix at proper position
BrechtDeMan@753 475 aHidx = audioholderArray.indexOf(audioholderName);
BrechtDeMan@753 476 aEidx = audioelementArray.indexOf(audioelementName);
BrechtDeMan@753 477 ratings[aHidx][aEidx].push(ratingValue);
BrechtDeMan@753 478 }
BrechtDeMan@753 479 }
BrechtDeMan@753 480 }
BrechtDeMan@753 481
BrechtDeMan@753 482 // go over all audioholders
BrechtDeMan@753 483
BrechtDeMan@753 484 // go over all audioelements within audioholder, see if present in idMatrix, add if not
BrechtDeMan@753 485 // add corresponding rating to 'ratings', at position corresponding with position in idMatrix
BrechtDeMan@753 486 }
BrechtDeMan@753 487 }
BrechtDeMan@753 488
BrechtDeMan@753 489 for (audioholderIndex = 0; audioholderIndex < audioholderArray.length; audioholderIndex++) {
BrechtDeMan@753 490 audioholderName = audioholderArray[audioholderIndex]; // for this song
BrechtDeMan@753 491 tickArray = []
BrechtDeMan@753 492
BrechtDeMan@753 493 raw_data = [['SubjectID', 'Rating']];
BrechtDeMan@753 494 audioElIdx = 0;
BrechtDeMan@753 495 for (audioelementIndex = 0; audioelementIndex<ratings[audioholderIndex].length; audioelementIndex++){
BrechtDeMan@753 496 if (ratings[audioholderIndex][audioelementIndex].length>0) {
BrechtDeMan@753 497 audioElIdx++; // increase if not empty
BrechtDeMan@753 498 // make tick label
BrechtDeMan@753 499 tickArray.push({v:audioElIdx, f: audioelementArray[audioelementIndex]});
BrechtDeMan@753 500 }
BrechtDeMan@753 501 for (subject = 0; subject<ratings[audioholderIndex][audioelementIndex].length; subject++){
BrechtDeMan@753 502 // add subject-value pair for each subject
BrechtDeMan@753 503 raw_data.push([audioElIdx, ratings[audioholderIndex][audioelementIndex][subject]]);
BrechtDeMan@753 504 }
BrechtDeMan@753 505 }
BrechtDeMan@753 506
BrechtDeMan@753 507 // create plot (one per song)
BrechtDeMan@753 508 var data = google.visualization.arrayToDataTable(raw_data);
BrechtDeMan@753 509
BrechtDeMan@753 510 var options = {
BrechtDeMan@753 511 title: audioholderName,
BrechtDeMan@753 512 hAxis: {title: 'audioelement ID', minValue: 0, maxValue: audioElIdx+1,
BrechtDeMan@753 513 ticks: tickArray},
BrechtDeMan@753 514 vAxis: {title: 'Rating', minValue: 0, maxValue: 1},
BrechtDeMan@753 515 seriesType: 'scatter',
BrechtDeMan@753 516 legend: 'none'
BrechtDeMan@753 517 };
BrechtDeMan@753 518 var div = document.createElement('div');
BrechtDeMan@753 519 document.body.appendChild(div);
BrechtDeMan@753 520 div.id = 'div_'+audioholderName;
BrechtDeMan@753 521 div.style.width = '1100px';
BrechtDeMan@753 522 div.style.height = '350px';
BrechtDeMan@753 523 var chart = new google.visualization.ComboChart(document.getElementById('div_'+audioholderName));
BrechtDeMan@753 524 chart.draw(data, options);
BrechtDeMan@753 525
BrechtDeMan@753 526 // box plots
BrechtDeMan@753 527 var div = document.createElement('div');
BrechtDeMan@753 528 document.body.appendChild(div);
BrechtDeMan@753 529 div.id = 'div_box_'+audioholderName;
BrechtDeMan@753 530 div.style.width = '1100px';
BrechtDeMan@753 531 div.style.height = '350px';
BrechtDeMan@753 532 // Get median, percentiles, maximum and minimum; outliers.
BrechtDeMan@753 533 pctl25 = [];
BrechtDeMan@753 534 pctl75 = [];
BrechtDeMan@753 535 med = [];
BrechtDeMan@753 536 min = [];
BrechtDeMan@753 537 max = [];
BrechtDeMan@753 538 outlierArray = [];
BrechtDeMan@753 539 max_n_outliers = 0; // maximum number of outliers for one audioelement
BrechtDeMan@753 540 for (audioelementIndex = 0; audioelementIndex<ratings[audioholderIndex].length; audioelementIndex++){
BrechtDeMan@753 541 med.push(median(ratings[audioholderIndex][audioelementIndex])); // median
BrechtDeMan@753 542 pctl25.push(percentile(ratings[audioholderIndex][audioelementIndex], 25)); // 25th percentile
BrechtDeMan@753 543 pctl75.push(percentile(ratings[audioholderIndex][audioelementIndex], 75)); // 75th percentile
BrechtDeMan@753 544 IQR = pctl75[pctl75.length-1]-pctl25[pctl25.length-1];
BrechtDeMan@753 545 // outliers: range of values which is above pctl75+1.5*IQR or below pctl25-1.5*IQR
BrechtDeMan@753 546 outliers = [];
BrechtDeMan@753 547 rest = [];
BrechtDeMan@753 548 for (idx = 0; idx<ratings[audioholderIndex][audioelementIndex].length; idx++){
BrechtDeMan@753 549 if (ratings[audioholderIndex][audioelementIndex][idx] > pctl75[pctl75.length-1]+1.5*IQR ||
BrechtDeMan@753 550 ratings[audioholderIndex][audioelementIndex][idx] < pctl25[pctl25.length-1]-1.5*IQR){
BrechtDeMan@753 551 outliers.push(ratings[audioholderIndex][audioelementIndex][idx]);
BrechtDeMan@753 552 }
BrechtDeMan@753 553 else {
BrechtDeMan@753 554 rest.push(ratings[audioholderIndex][audioelementIndex][idx]);
BrechtDeMan@753 555 }
BrechtDeMan@753 556 }
BrechtDeMan@753 557 outlierArray.push(outliers);
BrechtDeMan@753 558 max_n_outliers = Math.max(max_n_outliers, outliers.length); // update max mber
BrechtDeMan@753 559 // max: maximum value which is not outlier
BrechtDeMan@753 560 max.push(Math.max.apply(null, rest));
BrechtDeMan@753 561 // min: minimum value which is not outlier
BrechtDeMan@753 562 min.push(Math.min.apply(null, rest));
BrechtDeMan@753 563 }
BrechtDeMan@753 564
BrechtDeMan@753 565 // Build data array
BrechtDeMan@753 566 boxplot_data = [['ID', 'Span', '', '', '', 'Median']];
BrechtDeMan@753 567 for (idx = 0; idx < max_n_outliers; idx++) {
BrechtDeMan@753 568 boxplot_data[0].push('Outlier');
BrechtDeMan@753 569 }
BrechtDeMan@753 570 for (audioelementIndex = 0; audioelementIndex<ratings[audioholderIndex].length; audioelementIndex++){
BrechtDeMan@753 571 if (ratings[audioholderIndex][audioelementIndex].length>0) { // if rating array not empty for this audioelement
BrechtDeMan@753 572 data_array = [
BrechtDeMan@753 573 audioelementArray[audioelementIndex], // name
BrechtDeMan@753 574 min[audioelementIndex], // minimum
BrechtDeMan@753 575 pctl75[audioelementIndex],
BrechtDeMan@753 576 pctl25[audioelementIndex],
BrechtDeMan@753 577 max[audioelementIndex], // maximum
BrechtDeMan@753 578 med[audioelementIndex]
BrechtDeMan@753 579 ];
BrechtDeMan@753 580 for (idx = 0; idx < max_n_outliers; idx++) {
BrechtDeMan@753 581 if (idx<outlierArray[audioelementIndex].length){
BrechtDeMan@753 582 data_array.push(outlierArray[audioelementIndex][idx]);
BrechtDeMan@753 583 }
BrechtDeMan@753 584 else {
BrechtDeMan@753 585 data_array.push(null);
BrechtDeMan@753 586 }
BrechtDeMan@753 587 }
BrechtDeMan@753 588 boxplot_data.push(data_array);
BrechtDeMan@753 589 }
BrechtDeMan@753 590 }
BrechtDeMan@753 591
BrechtDeMan@753 592 // Create and populate the data table.
BrechtDeMan@753 593 var data = google.visualization.arrayToDataTable(boxplot_data);
BrechtDeMan@753 594 // Create and draw the visualization.
BrechtDeMan@753 595 var ac = new google.visualization.ComboChart(document.getElementById('div_box_'+audioholderName));
BrechtDeMan@753 596 ac.draw(data, {
BrechtDeMan@753 597 title : audioholderName,
BrechtDeMan@753 598 //width: 600,
BrechtDeMan@753 599 //height: 400,
BrechtDeMan@753 600 vAxis: {title: "Rating"},
BrechtDeMan@753 601 hAxis: {title: "audioelement ID"},
BrechtDeMan@753 602 seriesType: "line",
BrechtDeMan@753 603 pointSize: 5,
BrechtDeMan@753 604 lineWidth: 0,
BrechtDeMan@753 605 colors: ['black'],
BrechtDeMan@753 606 series: { 0: {type: "candlesticks", color: 'blue'}, // box plot shape
BrechtDeMan@753 607 1: {type: "line", pointSize: 10, lineWidth: 0, color: 'red' } }, // median
BrechtDeMan@753 608 legend: 'none'
BrechtDeMan@753 609 });
BrechtDeMan@753 610 }
BrechtDeMan@753 611 }
BrechtDeMan@753 612
BrechtDeMan@753 613 function makeTimeline(xmlFileName){ // WIP
BrechtDeMan@753 614 // Based on the XML file name, take time data and plot playback and marker movements
BrechtDeMan@753 615
BrechtDeMan@753 616 // read XML file and check if exists
BrechtDeMan@753 617 xml = readXML(xmlFileName);
BrechtDeMan@753 618 if (!xml) { // if file does not exist
BrechtDeMan@753 619 console.log('XML file '+xml+'does not exist. ('+xmlFileName+')')
BrechtDeMan@753 620 return; // do nothing; exit function
BrechtDeMan@753 621 }
BrechtDeMan@753 622 // get root of XML file
BrechtDeMan@753 623 root = xml.getElementsByTagName('browserevaluationresult')[0];
BrechtDeMan@753 624
BrechtDeMan@753 625 audioholder_time = 0;
BrechtDeMan@753 626 previous_audioholder_time = 0; // time spent before current audioholder
BrechtDeMan@753 627 time_offset = 0; // test starts at zero
BrechtDeMan@753 628
BrechtDeMan@753 629 // go over all audioholders
BrechtDeMan@753 630 audioholderNodes = root.getElementsByTagName('audioholder');
BrechtDeMan@753 631 for (audioholderIndex = 0; audioholderIndex < audioholderNodes.length; audioholderIndex++) {
BrechtDeMan@753 632 audioholderName = audioholderNodes[audioholderIndex].getAttribute('id');
BrechtDeMan@753 633 if (!audioholderName) {
BrechtDeMan@753 634 console.log('audioholder name is empty; go to next one. ('+xmlFileName+')');
BrechtDeMan@753 635 break;
BrechtDeMan@753 636 }
BrechtDeMan@753 637
BrechtDeMan@753 638 // subtract total audioholder length from subsequent audioholder event times
BrechtDeMan@753 639 audioholder_children = audioholderNodes[audioholderIndex].childNodes;
BrechtDeMan@753 640 foundIt = false;
BrechtDeMan@753 641 console.log(audioholder_children[2].getElementsByTagName("metricResult")) // not working!
BrechtDeMan@753 642 for (idx = 0; idx<audioholder_children.length; idx++) { // go over children
BrechtDeMan@753 643
BrechtDeMan@753 644 if (audioholder_children[idx].getElementsByTagName('metricResult').length) {
BrechtDeMan@753 645 console.log(audioholder_children[idx].getElementsByTagName('metricResult')[0]);
BrechtDeMan@753 646 if (audioholder_children[idx].getElementsByTagName('metricResult')[0].getAttribute('id') == "testTime"){
BrechtDeMan@753 647 audioholder_time = parseFloat(audioholder_children[idx].getElementsByTagName('metricResult')[0].textContent);
BrechtDeMan@753 648 console.log(audioholder_time);
BrechtDeMan@753 649 foundIt = true;
BrechtDeMan@753 650 }
BrechtDeMan@753 651 }
BrechtDeMan@753 652 }
BrechtDeMan@753 653 if (!foundIt) {
BrechtDeMan@753 654 console.log("Skipping audioholder without total time specified from "+xmlFileName+"."); // always hitting this
BrechtDeMan@753 655 break;
BrechtDeMan@753 656 }
BrechtDeMan@753 657
BrechtDeMan@753 658 audioelementNodes = audioholderNodes[audioholderIndex].getElementsByTagName('audioelement');
BrechtDeMan@753 659
BrechtDeMan@753 660 // make div
BrechtDeMan@753 661
BrechtDeMan@753 662 // draw chart
BrechtDeMan@753 663
BrechtDeMan@753 664 // legend with audioelement names
BrechtDeMan@753 665 }
BrechtDeMan@753 666 }
BrechtDeMan@753 667
BrechtDeMan@753 668 </script>
BrechtDeMan@753 669
BrechtDeMan@753 670
BrechtDeMan@753 671
BrechtDeMan@753 672 <style>
BrechtDeMan@753 673 div {
BrechtDeMan@753 674 padding: 2px;
BrechtDeMan@753 675 margin-top: 2px;
BrechtDeMan@753 676 margin-bottom: 2px;
BrechtDeMan@753 677 }
BrechtDeMan@753 678 div.head{
BrechtDeMan@753 679 margin-left: 10px;
BrechtDeMan@753 680 border: black;
BrechtDeMan@753 681 border-width: 2px;
BrechtDeMan@753 682 border-style: solid;
BrechtDeMan@753 683 }
BrechtDeMan@753 684 div.attrib{
BrechtDeMan@753 685 margin-left:25px;
BrechtDeMan@753 686 border: black;
BrechtDeMan@753 687 border-width: 2px;
BrechtDeMan@753 688 border-style: dashed;
BrechtDeMan@753 689 margin-bottom: 10px;
BrechtDeMan@753 690 }
BrechtDeMan@753 691 div#headerMatter{
BrechtDeMan@753 692 background-color: #FFFFCC;
BrechtDeMan@753 693 }
BrechtDeMan@753 694 div#currentStatement{
BrechtDeMan@753 695 font-size:3.0em;
BrechtDeMan@753 696 font-weight: bold;
BrechtDeMan@753 697
BrechtDeMan@753 698 }
BrechtDeMan@753 699 div#debugDisplay {
BrechtDeMan@753 700 color: #CCCCCC;
BrechtDeMan@753 701 font-size:0.3em;
BrechtDeMan@753 702 }
BrechtDeMan@753 703 span#scoreDisplay {
BrechtDeMan@753 704 font-weight: bold;
BrechtDeMan@753 705 }
BrechtDeMan@753 706 div#wrapper {
BrechtDeMan@753 707 width: 780px;
BrechtDeMan@753 708 border: 1px solid black;
BrechtDeMan@753 709 overflow: hidden; /* add this to contain floated children */
BrechtDeMan@753 710 }
BrechtDeMan@753 711 div#instrumentSection {
BrechtDeMan@753 712 width: 250px;
BrechtDeMan@753 713 border: 1px solid red;
BrechtDeMan@753 714 display: inline-block;
BrechtDeMan@753 715 }
BrechtDeMan@753 716 div#featureSection {
BrechtDeMan@753 717 width: 250px;
BrechtDeMan@753 718 border: 1px solid green;
BrechtDeMan@753 719 display: inline-block;
BrechtDeMan@753 720 }
BrechtDeMan@753 721 div#valenceSection {
BrechtDeMan@753 722 width: 250px;
BrechtDeMan@753 723 border: 1px solid blue;
BrechtDeMan@753 724 display: inline-block;
BrechtDeMan@753 725 }
BrechtDeMan@753 726 button#previousComment{
BrechtDeMan@753 727 width: 120px;
BrechtDeMan@753 728 height: 150px;
BrechtDeMan@753 729 font-size:1.5em;
BrechtDeMan@753 730 }
BrechtDeMan@753 731 button#nextComment{
BrechtDeMan@753 732 width: 666px;
BrechtDeMan@753 733 height: 150px;
BrechtDeMan@753 734 font-size:1.5em;
BrechtDeMan@753 735 }
BrechtDeMan@753 736 ul
BrechtDeMan@753 737 {
BrechtDeMan@753 738 list-style-type: none; /* no bullet points */
BrechtDeMan@753 739 margin-left: -20px; /* less indent */
BrechtDeMan@753 740 margin-top: 0px;
BrechtDeMan@753 741 margin-bottom: 5px;
BrechtDeMan@753 742 }
BrechtDeMan@753 743 </style>
BrechtDeMan@753 744
BrechtDeMan@753 745 </head>
BrechtDeMan@753 746
BrechtDeMan@753 747 <body>
BrechtDeMan@753 748 <h1>Subjective evaluation results</h1>
BrechtDeMan@753 749
BrechtDeMan@753 750 <div id="debugDisplay">
BrechtDeMan@753 751 XML file folder: <span id="xmlFileFolder_span"></span>
BrechtDeMan@753 752 </div>
BrechtDeMan@753 753
BrechtDeMan@753 754 <div id="headerMatter">
BrechtDeMan@753 755 <div>
BrechtDeMan@753 756 <strong>Result XML files:</strong> <span id="numberOfFiles_span"></span>
BrechtDeMan@753 757 </div>
BrechtDeMan@753 758 <div>
BrechtDeMan@753 759 <strong>Audioholders in dataset:</strong> <span id="audioholderArray_span"></span>
BrechtDeMan@753 760 </div>
BrechtDeMan@753 761 <div>
BrechtDeMan@753 762 <strong>Subjects in dataset:</strong> <span id="subjectArray_span"></span>
BrechtDeMan@753 763 </div>
BrechtDeMan@753 764 <div>
BrechtDeMan@753 765 <strong>Audioelements in dataset:</strong> <span id="audioelementArray_span"></span>
BrechtDeMan@753 766 </div>
BrechtDeMan@753 767 <br>
BrechtDeMan@753 768 </div>
BrechtDeMan@753 769 <br>
BrechtDeMan@753 770
BrechtDeMan@753 771 <!-- Show time elapsed
BrechtDeMan@753 772 The last annotation took <strong><span id="timeDisplay">(N/A)</span></strong> seconds.
BrechtDeMan@753 773 <br>-->
BrechtDeMan@753 774
BrechtDeMan@753 775 </body>
BrechtDeMan@753 776 </html>