Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 1304:3abbe1cc81ca

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