Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 1099:0a15fa67bda1

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