Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 810:babd5366db49

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