Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 609:34d8bca65edc multiple-tests-concatenation

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