Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 823:a0d7a64d8325

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