Mercurial > hg > webaudioevaluationtool

annotate analysis/analyse.html @ 2450:c602b4c69310

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