Mercurial > hg > webaudioevaluationtool

annotate analyse.html @ 716:cbfc18a7d068

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Paper: edits in various sections; Added preliminary analysis page
author Brecht De Man <BrechtDeMan@users.noreply.github.com>
date Wed, 14 Oct 2015 20:12:52 +0100
parents
children 378726f0ac91 9da8a3e65a78
rev   line source
BrechtDeMan@716 1 <!DOCTYPE html>
BrechtDeMan@716 2 <html lang="en">
BrechtDeMan@716 3 <head>
BrechtDeMan@716 4 <meta charset="utf-8">
BrechtDeMan@716 5
BrechtDeMan@716 6 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
BrechtDeMan@716 7 Remove this if you use the .htaccess -->
BrechtDeMan@716 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
BrechtDeMan@716 9
BrechtDeMan@716 10 <title>Analysis</title>
BrechtDeMan@716 11 <meta name="description" content="Show results from subjective evaluation">
BrechtDeMan@716 12 <meta name="author" content="Brecht De Man">
BrechtDeMan@716 13
BrechtDeMan@716 14 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
BrechtDeMan@716 15 <script type="text/javascript">
BrechtDeMan@716 16 // To aid 'one-page set-up' all scripts and CSS must be included directly in this file!
BrechtDeMan@716 17
BrechtDeMan@716 18 google.load("visualization", "1", {packages:["corechart"]});
BrechtDeMan@716 19
BrechtDeMan@716 20 /*************
BrechtDeMan@716 21 * SETUP *
BrechtDeMan@716 22 *************/
BrechtDeMan@716 23 // folder where to find the XML files
BrechtDeMan@716 24 xmlFileFolder = "saves";
BrechtDeMan@716 25 // array of XML files
BrechtDeMan@716 26 var xmlFiles = ['McG-A-2014-03.xml','McG-B-2014-03.xml','McG-C-2014-03.xml'];
BrechtDeMan@716 27
BrechtDeMan@716 28 //TODO: make retrieval of file names automatic / drag files on here
BrechtDeMan@716 29
BrechtDeMan@716 30 /****************
BrechtDeMan@716 31 * VARIABLES *
BrechtDeMan@716 32 ****************/
BrechtDeMan@716 33
BrechtDeMan@716 34 // Counters
BrechtDeMan@716 35 // How many files, audioHolders, audioElementes and statements annotated (don't count current one)
BrechtDeMan@716 36 var numberOfFiles = -1;
BrechtDeMan@716 37 var numberOfaudioHolders = -1;
BrechtDeMan@716 38 var numberOfaudioElementes = -1;
BrechtDeMan@716 39 var numberOfStatements = -1;
BrechtDeMan@716 40 var numberOfSkippedComments = 0;
BrechtDeMan@716 41
BrechtDeMan@716 42 // Object arrays
BrechtDeMan@716 43 var fileNameArray = [];
BrechtDeMan@716 44 var subjectArray = [];
BrechtDeMan@716 45 var audioHolderArray = [];
BrechtDeMan@716 46 var audioElementArray = [];
BrechtDeMan@716 47
BrechtDeMan@716 48 // End of (file, audioholder, audioelement) flags
BrechtDeMan@716 49 var newFile = true;
BrechtDeMan@716 50 var newAudioHolder = true;
BrechtDeMan@716 51 var newAudioElement = true;
BrechtDeMan@716 52
BrechtDeMan@716 53 var fileCounter = 0; // file index
BrechtDeMan@716 54 var audioHolderCounter=0; // audioholder index (current XML file)
BrechtDeMan@716 55 var audioElementCounter=0; // audioelement index (current audioholder)
BrechtDeMan@716 56 var statementNumber=0; // total number of statements
BrechtDeMan@716 57
BrechtDeMan@716 58 var root; // root of XML file
BrechtDeMan@716 59 var commentInFull = ''; // full comment
BrechtDeMan@716 60
BrechtDeMan@716 61 var playAudio = true; // whether corresponding audio should be played back
BrechtDeMan@716 62
BrechtDeMan@716 63 // // Measuring time
BrechtDeMan@716 64 // var lastTimeMeasured = -1; //
BrechtDeMan@716 65 // var durationLastAnnotation = -1; // duration of last annotation
BrechtDeMan@716 66 // var timeArray = [];
BrechtDeMan@716 67 // var MIN_TIME = 1.0; // minimum time counted as significant
BrechtDeMan@716 68 // var measurementPaused = false; // whether time measurement is paused
BrechtDeMan@716 69 // var timeInBuffer = 0; //
BrechtDeMan@716 70
BrechtDeMan@716 71 var topLevel;
BrechtDeMan@716 72 window.onload = function() {
BrechtDeMan@716 73 // Initialise page
BrechtDeMan@716 74 topLevel = document.getElementById('topLevelBody');
BrechtDeMan@716 75 var setup = document.createElement('div');
BrechtDeMan@716 76 setup.id = 'setupTagDiv';
BrechtDeMan@716 77 loadAllFiles();
BrechtDeMan@716 78
BrechtDeMan@716 79 makePlots();
BrechtDeMan@716 80 // measure time at this point:
BrechtDeMan@716 81 lastTimeMeasured = new Date().getTime(); // in milliseconds
BrechtDeMan@716 82 };
BrechtDeMan@716 83
BrechtDeMan@716 84 // Assert function
BrechtDeMan@716 85 function assert(condition, message) {
BrechtDeMan@716 86 if (!condition) {
BrechtDeMan@716 87 message = message || "Assertion failed";
BrechtDeMan@716 88 if (typeof Error !== "undefined") {
BrechtDeMan@716 89 throw new Error(message);
BrechtDeMan@716 90 }
BrechtDeMan@716 91 throw message; // Fallback
BrechtDeMan@716 92 }
BrechtDeMan@716 93 }
BrechtDeMan@716 94
BrechtDeMan@716 95 function median(values) {
BrechtDeMan@716 96 values.sort( function(a,b) {return a - b;} );
BrechtDeMan@716 97 var half = Math.floor(values.length/2);
BrechtDeMan@716 98 if(values.length % 2)
BrechtDeMan@716 99 return values[half];
BrechtDeMan@716 100 else
BrechtDeMan@716 101 return (values[half-1] + values[half]) / 2.0;
BrechtDeMan@716 102 }
BrechtDeMan@716 103
BrechtDeMan@716 104 /***********************
BrechtDeMan@716 105 * TIME MEASUREMENT *
BrechtDeMan@716 106 ************************/
BrechtDeMan@716 107
BrechtDeMan@716 108 // measure time since last time this function was called
BrechtDeMan@716 109 function timeSinceLastCall() {
BrechtDeMan@716 110 // current time
BrechtDeMan@716 111 var currentTime = new Date().getTime();
BrechtDeMan@716 112 // calculate time difference
BrechtDeMan@716 113 var timeDifference = currentTime - lastTimeMeasured + timeInBuffer;
BrechtDeMan@716 114 // clear buffer (for pausing)
BrechtDeMan@716 115 timeInBuffer = 0;
BrechtDeMan@716 116 // remember last measured time
BrechtDeMan@716 117 lastTimeMeasured = currentTime;
BrechtDeMan@716 118 return timeDifference;
BrechtDeMan@716 119 }
BrechtDeMan@716 120
BrechtDeMan@716 121 // pause time measurement
BrechtDeMan@716 122 function pauseTimeMeasurement() {
BrechtDeMan@716 123 // UN-PAUSE
BrechtDeMan@716 124 if (measurementPaused) { // already paused
BrechtDeMan@716 125 // button shows 'pause' again
BrechtDeMan@716 126 document.getElementById('pauseButton').innerHTML = 'Pause';
BrechtDeMan@716 127 // toggle state
BrechtDeMan@716 128 measurementPaused = false;
BrechtDeMan@716 129 // resume time measurement
BrechtDeMan@716 130 lastTimeMeasured = new Date().getTime(); // reset time, discard time while paused
BrechtDeMan@716 131 } else { // PAUSE
BrechtDeMan@716 132 // button shows 'resume'
BrechtDeMan@716 133 document.getElementById('pauseButton').innerHTML = 'Resume';
BrechtDeMan@716 134 // toggle state
BrechtDeMan@716 135 measurementPaused = true;
BrechtDeMan@716 136 // pause time measurement
BrechtDeMan@716 137 timeInBuffer = timeSinceLastCall();
BrechtDeMan@716 138 }
BrechtDeMan@716 139 }
BrechtDeMan@716 140
BrechtDeMan@716 141 // show elapsed time on interface
BrechtDeMan@716 142 function showTimeElapsedInSeconds() {
BrechtDeMan@716 143 // if paused: un-pause
BrechtDeMan@716 144 if (measurementPaused) {
BrechtDeMan@716 145 pauseTimeMeasurement();
BrechtDeMan@716 146 }
BrechtDeMan@716 147
BrechtDeMan@716 148 // time of last annotation
BrechtDeMan@716 149 var lastAnnotationTime = timeSinceLastCall()/1000;
BrechtDeMan@716 150 document.getElementById('timeDisplay').innerHTML = lastAnnotationTime.toFixed(2);
BrechtDeMan@716 151 // average time over last ... annotations
BrechtDeMan@716 152 var avgAnnotationTime;
BrechtDeMan@716 153 var numberOfElementsToAverage =
BrechtDeMan@716 154 document.getElementById('numberOfTimeAverages').value;
BrechtDeMan@716 155 if (isPositiveInteger(numberOfElementsToAverage)) {
BrechtDeMan@716 156 avgAnnotationTime =
BrechtDeMan@716 157 calculateAverageTime(lastAnnotationTime,
BrechtDeMan@716 158 Number(numberOfElementsToAverage));
BrechtDeMan@716 159 } else {
BrechtDeMan@716 160 // change text field content to 'ALL'
BrechtDeMan@716 161 document.getElementById('numberOfTimeAverages').value = 'ALL';
BrechtDeMan@716 162 avgAnnotationTime = calculateAverageTime(lastAnnotationTime, -1);
BrechtDeMan@716 163 }
BrechtDeMan@716 164 document.getElementById('timeAverageDisplay').innerHTML = avgAnnotationTime.toFixed(2);
BrechtDeMan@716 165 }
BrechtDeMan@716 166
BrechtDeMan@716 167 // auxiliary function: is string a positive integer?
BrechtDeMan@716 168 // http://stackoverflow.com/questions/10834796/...
BrechtDeMan@716 169 // validate-that-a-string-is-a-positive-integer
BrechtDeMan@716 170 function isPositiveInteger(str) {
BrechtDeMan@716 171 var n = ~~Number(str);
BrechtDeMan@716 172 return String(n) === str && n >= 0;
BrechtDeMan@716 173 }
BrechtDeMan@716 174
BrechtDeMan@716 175 // calculate average time
BrechtDeMan@716 176 function calculateAverageTime(newTimeMeasurementInSeconds,numberOfPoints) {
BrechtDeMan@716 177 // append last measurement time to time array, if significant
BrechtDeMan@716 178 if (newTimeMeasurementInSeconds > MIN_TIME) {
BrechtDeMan@716 179 timeArray.push(newTimeMeasurementInSeconds);
BrechtDeMan@716 180 }
BrechtDeMan@716 181 // average over last N elements of this array
BrechtDeMan@716 182 if (numberOfPoints < 0 || numberOfPoints>=timeArray.length) { // calculate average over all
BrechtDeMan@716 183 var sum = 0;
BrechtDeMan@716 184 for (var i = 0; i < timeArray.length; i++) {
BrechtDeMan@716 185 sum += timeArray[i];
BrechtDeMan@716 186 }
BrechtDeMan@716 187 averageOfTimes = sum/timeArray.length;
BrechtDeMan@716 188 } else { // calculate average over specified number of times measured last
BrechtDeMan@716 189 var sum = 0;
BrechtDeMan@716 190 for (var i = timeArray.length-numberOfPoints; i < timeArray.length; i++) {
BrechtDeMan@716 191 sum += timeArray[i];
BrechtDeMan@716 192 }
BrechtDeMan@716 193 averageOfTimes = sum/numberOfPoints;
BrechtDeMan@716 194 }
BrechtDeMan@716 195 return averageOfTimes;
BrechtDeMan@716 196 }
BrechtDeMan@716 197
BrechtDeMan@716 198
BrechtDeMan@716 199 /********************************
BrechtDeMan@716 200 * PLAYBACK OF AUDIO *
BrechtDeMan@716 201 ********************************/
BrechtDeMan@716 202
BrechtDeMan@716 203 //PLAYaudioElement
BrechtDeMan@716 204 // Keep track of whether audio should be played
BrechtDeMan@716 205 function playFlagChanged(){
BrechtDeMan@716 206 playAudio = playFlag.checked; // global variable
BrechtDeMan@716 207
BrechtDeMan@716 208 if (!playAudio){ // if audio needs to stop
BrechtDeMan@716 209 audio.pause(); // stop audio - if anything is playing
BrechtDeMan@716 210 currently_playing = ''; // back to empty string so playaudioElement knows nothing's playing
BrechtDeMan@716 211 }
BrechtDeMan@716 212 }
BrechtDeMan@716 213
BrechtDeMan@716 214 // audioHolder that's currently playing
BrechtDeMan@716 215 var currently_playing_audioHolder = ''; // at first: empty string
BrechtDeMan@716 216 var currently_playing_audioElement = '';
BrechtDeMan@716 217 var audio;
BrechtDeMan@716 218
BrechtDeMan@716 219 // Play audioElement of audioHolder if available, from start or from same position
BrechtDeMan@716 220 function playaudioElement(audioHolderName, audioElementerName){
BrechtDeMan@716 221 if (playAudio) { // if enabled
BrechtDeMan@716 222 // get corresponding file from folder
BrechtDeMan@716 223 var file_location = 'audio/'+audioHolderName + '/' + audioElementerName + '.mp3'; // fixed path and file name format
BrechtDeMan@716 224
BrechtDeMan@716 225 // if not available, show error/warning message
BrechtDeMan@716 226 //TODO ...
BrechtDeMan@716 227
BrechtDeMan@716 228 // if nothing playing yet, start playing
BrechtDeMan@716 229 if (currently_playing_audioHolder == ''){ // signal that nothing is playing
BrechtDeMan@716 230 //playSound(audioBuffer);
BrechtDeMan@716 231 audio = new Audio(file_location);
BrechtDeMan@716 232 audio.loop = true; // loop when end is reached
BrechtDeMan@716 233 audio.play();
BrechtDeMan@716 234 currently_playing_audioHolder = audioHolderName;
BrechtDeMan@716 235 currently_playing_audioElement = audioElementerName;
BrechtDeMan@716 236 } else if (currently_playing_audioHolder != audioHolderName) {
BrechtDeMan@716 237 // if different audioHolder playing, stop that and start playing
BrechtDeMan@716 238 audio.pause(); // stop audio
BrechtDeMan@716 239 audio = new Audio(file_location); // load new file
BrechtDeMan@716 240 audio.loop = true; // loop when end is reached
BrechtDeMan@716 241 audio.play(); // play audio from the start
BrechtDeMan@716 242 currently_playing_audioHolder = audioHolderName;
BrechtDeMan@716 243 currently_playing_audioElement = audioElementerName;
BrechtDeMan@716 244 } else if (currently_playing_audioElement != audioElementerName) {
BrechtDeMan@716 245 // if same audioHolder playing, start playing from where it left off
BrechtDeMan@716 246 skipTime = audio.currentTime; // time to skip to
BrechtDeMan@716 247 audio.pause(); // stop audio
BrechtDeMan@716 248 audio = new Audio(file_location);
BrechtDeMan@716 249 audio.addEventListener('loadedmetadata', function() {
BrechtDeMan@716 250 this.currentTime = skipTime;
BrechtDeMan@716 251 console.log('Loaded '+audioHolderName+'-'+audioElementerName+', playing from '+skipTime);
BrechtDeMan@716 252 }, false); // skip to same time when audio is loaded!
BrechtDeMan@716 253 audio.loop = true; // loop when end is reached
BrechtDeMan@716 254 audio.play(); // play from that time
BrechtDeMan@716 255 audio.currentTime = skipTime;
BrechtDeMan@716 256 currently_playing_audioHolder = audioHolderName;
BrechtDeMan@716 257 currently_playing_audioElement = audioElementerName;
BrechtDeMan@716 258 }
BrechtDeMan@716 259 // if same audioElement playing: keep on playing (i.e. do nothing)
BrechtDeMan@716 260 }
BrechtDeMan@716 261 }
BrechtDeMan@716 262
BrechtDeMan@716 263 /********************
BrechtDeMan@716 264 * READING FILES *
BrechtDeMan@716 265 ********************/
BrechtDeMan@716 266
BrechtDeMan@716 267 // Read necessary data from XML file
BrechtDeMan@716 268 function readXML(xmlFileName){
BrechtDeMan@716 269 if (window.XMLHttpRequest)
BrechtDeMan@716 270 {// code for IE7+, Firefox, Chrome, Opera, Safari
BrechtDeMan@716 271 xmlhttp=new XMLHttpRequest();
BrechtDeMan@716 272 }
BrechtDeMan@716 273 else
BrechtDeMan@716 274 {// code for IE6, IE5
BrechtDeMan@716 275 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
BrechtDeMan@716 276 }
BrechtDeMan@716 277 xmlhttp.open("GET",xmlFileName,false);
BrechtDeMan@716 278 xmlhttp.send();
BrechtDeMan@716 279 return xmlhttp.responseXML;
BrechtDeMan@716 280 }
BrechtDeMan@716 281
BrechtDeMan@716 282 // go over all files and compute relevant statistics
BrechtDeMan@716 283 function loadAllFiles() {
BrechtDeMan@716 284 // retrieve information from XMLs
BrechtDeMan@716 285
BrechtDeMan@716 286 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
BrechtDeMan@716 287 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
BrechtDeMan@716 288 xml = readXML(xmlFileName);
BrechtDeMan@716 289 if (xml != null) { // if file exists
BrechtDeMan@716 290 // append file name to array of file names
BrechtDeMan@716 291 fileNameArray.push(xmlFiles[fileIndex]);
BrechtDeMan@716 292
BrechtDeMan@716 293 // get root of XML file
BrechtDeMan@716 294 root = xml.getElementsByTagName('browserevaluationresult')[0];
BrechtDeMan@716 295
BrechtDeMan@716 296 // get subject ID, add to array if not already there
BrechtDeMan@716 297 pretest = root.getElementsByTagName('pretest')[0];
BrechtDeMan@716 298 subjectID = pretest.getElementsByTagName('comment')[0];
BrechtDeMan@716 299 if (subjectID.getAttribute('id')!='sessionId') { // warning in console when not available
BrechtDeMan@716 300 console.log(xmlFiles[fileIndex]+': no SessionID available');
BrechtDeMan@716 301 }
BrechtDeMan@716 302 if (subjectArray.indexOf(subjectID.textContent) == -1) { // if not already in array
BrechtDeMan@716 303 subjectArray.push(subjectID.textContent); // append to array
BrechtDeMan@716 304 }
BrechtDeMan@716 305
BrechtDeMan@716 306 // go over all audioHolders, add to array if not already there
BrechtDeMan@716 307 audioHolderNodes = root.getElementsByTagName('audioholder');
BrechtDeMan@716 308 // go over audioHolderNodes and append audioHolder name when not present yet
BrechtDeMan@716 309 for (audioHolderIndex = 0; audioHolderIndex < audioHolderNodes.length; audioHolderIndex++) {
BrechtDeMan@716 310 audioHolderName = audioHolderNodes[audioHolderIndex].getAttribute('id');
BrechtDeMan@716 311 if (audioHolderArray.indexOf(audioHolderName) == -1) { // if not already in array
BrechtDeMan@716 312 audioHolderArray.push(audioHolderName); // append to array
BrechtDeMan@716 313 }
BrechtDeMan@716 314 // within each audioHolder, go over all audioElement IDs, add to array if not already there
BrechtDeMan@716 315 audioElementNodes = audioHolderNodes[audioHolderIndex].getElementsByTagName('audioelement');
BrechtDeMan@716 316 for (audioElementIndex = 0; audioElementIndex < audioElementNodes.length; audioElementIndex++) {
BrechtDeMan@716 317 audioElementName = audioElementNodes[audioElementIndex].getAttribute('id');
BrechtDeMan@716 318 if (audioElementArray.indexOf(audioElementName) == -1) { // if not already in array
BrechtDeMan@716 319 audioElementArray.push(audioElementName); // append to array
BrechtDeMan@716 320 }
BrechtDeMan@716 321 }
BrechtDeMan@716 322 }
BrechtDeMan@716 323 // count occurrences of each audioHolder
BrechtDeMan@716 324 // ...
BrechtDeMan@716 325 }
BrechtDeMan@716 326 else {
BrechtDeMan@716 327 console.log('XML file '+xmlFileName+' not found.');
BrechtDeMan@716 328 }
BrechtDeMan@716 329 }
BrechtDeMan@716 330
BrechtDeMan@716 331 // sort alphabetically
BrechtDeMan@716 332 fileNameArray.sort();
BrechtDeMan@716 333 subjectArray.sort();
BrechtDeMan@716 334 audioHolderArray.sort();
BrechtDeMan@716 335 audioElementArray.sort();
BrechtDeMan@716 336
BrechtDeMan@716 337 // display all information in HTML
BrechtDeMan@716 338 // show XML file folder
BrechtDeMan@716 339 document.getElementById('xmlFileFolder_span').innerHTML = "\""+xmlFileFolder+"/\"";
BrechtDeMan@716 340 // show number of files
BrechtDeMan@716 341 document.getElementById('numberOfFiles_span').innerHTML = fileNameArray.length;
BrechtDeMan@716 342 // show list of subject names
BrechtDeMan@716 343 document.getElementById('subjectArray_span').innerHTML = subjectArray.toString();
BrechtDeMan@716 344 // show list of audioHolders
BrechtDeMan@716 345 document.getElementById('audioHolderArray_span').innerHTML = audioHolderArray.toString();
BrechtDeMan@716 346 // show list of audioElementes
BrechtDeMan@716 347 document.getElementById('audioElementArray_span').innerHTML = audioElementArray.toString();
BrechtDeMan@716 348 }
BrechtDeMan@716 349
BrechtDeMan@716 350 function makePlots() {
BrechtDeMan@716 351 // create value array
BrechtDeMan@716 352 var ratings = []; // 3D matrix of ratings (audioHolder, audioElement, subject)
BrechtDeMan@716 353 for (audioHolderIndex = 0; audioHolderIndex < audioHolderNodes.length; audioHolderIndex++) {
BrechtDeMan@716 354 ratings.push([]);
BrechtDeMan@716 355 for (audioElementIndex = 0; audioElementIndex < audioElementNodes.length; audioElementIndex++) {
BrechtDeMan@716 356 ratings[audioHolderIndex].push([]);
BrechtDeMan@716 357 }
BrechtDeMan@716 358 }
BrechtDeMan@716 359
BrechtDeMan@716 360 // go over all XML files
BrechtDeMan@716 361 for (fileIndex = 0; fileIndex < xmlFiles.length; fileIndex++) {
BrechtDeMan@716 362 xmlFileName = xmlFileFolder+"/"+xmlFiles[fileIndex];
BrechtDeMan@716 363 xml = readXML(xmlFileName);
BrechtDeMan@716 364 if (xml != null) { // if file exists
BrechtDeMan@716 365 // get root of XML file
BrechtDeMan@716 366 root = xml.getElementsByTagName('browserevaluationresult')[0];
BrechtDeMan@716 367 // go over all audioHolders
BrechtDeMan@716 368 audioHolderNodes = root.getElementsByTagName('audioholder');
BrechtDeMan@716 369 for (audioHolderIndex = 0; audioHolderIndex < audioHolderNodes.length; audioHolderIndex++) {
BrechtDeMan@716 370 audioHolderName = audioHolderNodes[audioHolderIndex].getAttribute('id');
BrechtDeMan@716 371 audioElementNodes = audioHolderNodes[audioHolderIndex].getElementsByTagName('audioelement');
BrechtDeMan@716 372 // go over all audioelements
BrechtDeMan@716 373 for (audioElementIndex = 0; audioElementIndex < audioElementNodes.length; audioElementIndex++) {
BrechtDeMan@716 374 audioElementName = audioElementNodes[audioElementIndex].getAttribute('id');
BrechtDeMan@716 375 // get value
BrechtDeMan@716 376 var value = audioElementNodes[audioElementIndex].getElementsByTagName("value")[0].textContent;
BrechtDeMan@716 377 if (value) { // if not empty, null, undefined...
BrechtDeMan@716 378 ratingValue = parseFloat(value);
BrechtDeMan@716 379 // add to matrix
BrechtDeMan@716 380 ratings[audioHolderIndex][audioElementIndex].push(ratingValue)
BrechtDeMan@716 381 }
BrechtDeMan@716 382 }
BrechtDeMan@716 383 }
BrechtDeMan@716 384
BrechtDeMan@716 385 // go over all audioHolders
BrechtDeMan@716 386
BrechtDeMan@716 387 // go over all audioElements within audioHolder, see if present in idMatrix, add if not
BrechtDeMan@716 388 // add corresponding rating to 'ratings', at position corresponding with position in idMatrix
BrechtDeMan@716 389 }
BrechtDeMan@716 390 }
BrechtDeMan@716 391
BrechtDeMan@716 392 for (audioHolderIndex = 0; audioHolderIndex < audioHolderArray.length; audioHolderIndex++) {
BrechtDeMan@716 393 audioHolderName = audioHolderArray[audioHolderIndex]; // for this song
BrechtDeMan@716 394 tickArray = []
BrechtDeMan@716 395 medianOfAudioElement = []
BrechtDeMan@716 396
BrechtDeMan@716 397 raw_data = [['SubjectID', 'Rating']];
BrechtDeMan@716 398 audioElIdx = 0;
BrechtDeMan@716 399 for (audioElementIndex = 0; audioElementIndex<ratings[audioHolderIndex].length; audioElementIndex++){
BrechtDeMan@716 400 if (ratings[audioHolderIndex][audioElementIndex].length>0) {
BrechtDeMan@716 401 audioElIdx++; // increase if not empty
BrechtDeMan@716 402 // make tick label
BrechtDeMan@716 403 tickArray.push({v:audioElIdx, f: audioElementArray[audioElementIndex]});
BrechtDeMan@716 404 // add median
BrechtDeMan@716 405 medianOfAudioElement.push(median(ratings[audioHolderIndex][audioElementIndex]));
BrechtDeMan@716 406 }
BrechtDeMan@716 407 for (subject = 0; subject<ratings[audioHolderIndex][audioElementIndex].length; subject++){
BrechtDeMan@716 408 // add subject-value pair for each subject
BrechtDeMan@716 409 raw_data.push([audioElIdx, ratings[audioHolderIndex][audioElementIndex][subject]]);
BrechtDeMan@716 410 }
BrechtDeMan@716 411 }
BrechtDeMan@716 412
BrechtDeMan@716 413 // create plot (one per song)
BrechtDeMan@716 414 var data = google.visualization.arrayToDataTable(raw_data);
BrechtDeMan@716 415
BrechtDeMan@716 416 var options = {
BrechtDeMan@716 417 title: audioHolderName,
BrechtDeMan@716 418 hAxis: {title: 'Subject', minValue: 0, maxValue: audioElIdx+1,
BrechtDeMan@716 419 ticks: tickArray},
BrechtDeMan@716 420 vAxis: {title: 'Rating', minValue: 0, maxValue: 1},
BrechtDeMan@716 421 seriesType: 'scatter',
BrechtDeMan@716 422 legend: 'none'
BrechtDeMan@716 423 };
BrechtDeMan@716 424 var div = document.createElement('div');
BrechtDeMan@716 425 document.body.appendChild(div);
BrechtDeMan@716 426 div.id = 'div_'+audioHolderName;
BrechtDeMan@716 427 div.style.width = '1100px';
BrechtDeMan@716 428 div.style.height = '350px';
BrechtDeMan@716 429 var chart = new google.visualization.ComboChart(document.getElementById('div_'+audioHolderName));
BrechtDeMan@716 430 chart.draw(data, options);
BrechtDeMan@716 431
BrechtDeMan@716 432 // box plots
BrechtDeMan@716 433 // function drawVisualization() {
BrechtDeMan@716 434 // // Create and populate the data table.
BrechtDeMan@716 435 // var data = google.visualization.arrayToDataTable([
BrechtDeMan@716 436 // ['ID', 'IQR', '', '', '', 'Median', 'Average'],
BrechtDeMan@716 437 // ['Serie1', 20, 28, 38, 45, 20, 25],
BrechtDeMan@716 438 // ['Serie2', 31, 38, 55, 66, 30, 35],
BrechtDeMan@716 439 // ['Serie3', 50, 55, 77, 80, 10, 15],
BrechtDeMan@716 440 // ['Serie4', 77, 77, 66, 50, 20, 25],
BrechtDeMan@716 441 // ['Serie5', 68, 66, 22, 15, 30, 35]
BrechtDeMan@716 442 // // Treat first row as data as well.
BrechtDeMan@716 443 // ]);
BrechtDeMan@716 444 // // Create and draw the visualization.
BrechtDeMan@716 445 // var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
BrechtDeMan@716 446 // ac.draw(data, {
BrechtDeMan@716 447 // title : 'Box Plot with Median and Average',
BrechtDeMan@716 448 // width: 600,
BrechtDeMan@716 449 // height: 400,
BrechtDeMan@716 450 // vAxis: {title: "Value"},
BrechtDeMan@716 451 // hAxis: {title: "Serie ID"},
BrechtDeMan@716 452 // series: { 0: {type: "candlesticks"}, 1: {type: "line", pointSize: 10, lineWidth:
BrechtDeMan@716 453 // 0 }, 2: {type: "line", pointSize: 10, lineWidth: 0, color: 'black' } }
BrechtDeMan@716 454 // });
BrechtDeMan@716 455 // }
BrechtDeMan@716 456 }
BrechtDeMan@716 457 }
BrechtDeMan@716 458
BrechtDeMan@716 459 </script>
BrechtDeMan@716 460
BrechtDeMan@716 461
BrechtDeMan@716 462
BrechtDeMan@716 463 <style>
BrechtDeMan@716 464 div {
BrechtDeMan@716 465 padding: 2px;
BrechtDeMan@716 466 margin-top: 2px;
BrechtDeMan@716 467 margin-bottom: 2px;
BrechtDeMan@716 468 }
BrechtDeMan@716 469 div.head{
BrechtDeMan@716 470 margin-left: 10px;
BrechtDeMan@716 471 border: black;
BrechtDeMan@716 472 border-width: 2px;
BrechtDeMan@716 473 border-style: solid;
BrechtDeMan@716 474 }
BrechtDeMan@716 475 div.attrib{
BrechtDeMan@716 476 margin-left:25px;
BrechtDeMan@716 477 border: black;
BrechtDeMan@716 478 border-width: 2px;
BrechtDeMan@716 479 border-style: dashed;
BrechtDeMan@716 480 margin-bottom: 10px;
BrechtDeMan@716 481 }
BrechtDeMan@716 482 div#headerMatter{
BrechtDeMan@716 483 background-color: #FFFFCC;
BrechtDeMan@716 484 }
BrechtDeMan@716 485 div#currentStatement{
BrechtDeMan@716 486 font-size:3.0em;
BrechtDeMan@716 487 font-weight: bold;
BrechtDeMan@716 488
BrechtDeMan@716 489 }
BrechtDeMan@716 490 div#debugDisplay {
BrechtDeMan@716 491 color: #CCCCCC;
BrechtDeMan@716 492 font-size:0.3em;
BrechtDeMan@716 493 }
BrechtDeMan@716 494 span#scoreDisplay {
BrechtDeMan@716 495 font-weight: bold;
BrechtDeMan@716 496 }
BrechtDeMan@716 497 div#wrapper {
BrechtDeMan@716 498 width: 780px;
BrechtDeMan@716 499 border: 1px solid black;
BrechtDeMan@716 500 overflow: hidden; /* add this to contain floated children */
BrechtDeMan@716 501 }
BrechtDeMan@716 502 div#instrumentSection {
BrechtDeMan@716 503 width: 250px;
BrechtDeMan@716 504 border: 1px solid red;
BrechtDeMan@716 505 display: inline-block;
BrechtDeMan@716 506 }
BrechtDeMan@716 507 div#featureSection {
BrechtDeMan@716 508 width: 250px;
BrechtDeMan@716 509 border: 1px solid green;
BrechtDeMan@716 510 display: inline-block;
BrechtDeMan@716 511 }
BrechtDeMan@716 512 div#valenceSection {
BrechtDeMan@716 513 width: 250px;
BrechtDeMan@716 514 border: 1px solid blue;
BrechtDeMan@716 515 display: inline-block;
BrechtDeMan@716 516 }
BrechtDeMan@716 517 button#previousComment{
BrechtDeMan@716 518 width: 120px;
BrechtDeMan@716 519 height: 150px;
BrechtDeMan@716 520 font-size:1.5em;
BrechtDeMan@716 521 }
BrechtDeMan@716 522 button#nextComment{
BrechtDeMan@716 523 width: 666px;
BrechtDeMan@716 524 height: 150px;
BrechtDeMan@716 525 font-size:1.5em;
BrechtDeMan@716 526 }
BrechtDeMan@716 527 ul
BrechtDeMan@716 528 {
BrechtDeMan@716 529 list-style-type: none; /* no bullet points */
BrechtDeMan@716 530 margin-left: -20px; /* less indent */
BrechtDeMan@716 531 margin-top: 0px;
BrechtDeMan@716 532 margin-bottom: 5px;
BrechtDeMan@716 533 }
BrechtDeMan@716 534 </style>
BrechtDeMan@716 535
BrechtDeMan@716 536 </head>
BrechtDeMan@716 537
BrechtDeMan@716 538 <body>
BrechtDeMan@716 539 <h1>Subjective evaluation results</h1>
BrechtDeMan@716 540
BrechtDeMan@716 541 <div id="debugDisplay">
BrechtDeMan@716 542 XML file folder: <span id="xmlFileFolder_span"></span>
BrechtDeMan@716 543 </div>
BrechtDeMan@716 544
BrechtDeMan@716 545 <div id="headerMatter">
BrechtDeMan@716 546 <div>
BrechtDeMan@716 547 <strong>Result XML files:</strong> <span id="numberOfFiles_span"></span>
BrechtDeMan@716 548 </div>
BrechtDeMan@716 549 <div>
BrechtDeMan@716 550 <strong>Audioholders in dataset:</strong> <span id="audioHolderArray_span"></span>
BrechtDeMan@716 551 </div>
BrechtDeMan@716 552 <div>
BrechtDeMan@716 553 <strong>Subjects in dataset:</strong> <span id="subjectArray_span"></span>
BrechtDeMan@716 554 </div>
BrechtDeMan@716 555 <div>
BrechtDeMan@716 556 <strong>Audioelements in dataset:</strong> <span id="audioElementArray_span"></span>
BrechtDeMan@716 557 </div>
BrechtDeMan@716 558 <br>
BrechtDeMan@716 559 </div>
BrechtDeMan@716 560 <br>
BrechtDeMan@716 561
BrechtDeMan@716 562 <!-- Show time elapsed
BrechtDeMan@716 563 The last annotation took <strong><span id="timeDisplay">(N/A)</span></strong> seconds.
BrechtDeMan@716 564 <br>-->
BrechtDeMan@716 565
BrechtDeMan@716 566 </body>
BrechtDeMan@716 567 </html>