Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 2202:61c8e13f1e2e

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