Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 1374:efbd764e1d60

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