Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 1121:595511282fa7

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