Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 1939:7c846e19725f

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