Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 761:af6cfa619c24

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