Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 2103:cc2fb78ddd89

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