Mercurial > hg > waet-hammond-1

annotate analyse.html @ 22:1f375b7d75fd tip

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