comparison ape.js @ 1478:82f43919f385

Paper: Added interface screenshot and box plot example
author Brecht De Man <b.deman@qmul.ac.uk>
date Thu, 15 Oct 2015 20:10:00 +0100
parents
children 6fb0b21d6f85
comparison
equal deleted inserted replaced
-1:000000000000 1478:82f43919f385
1 /**
2 * ape.js
3 * Create the APE interface
4 */
5
6
7 // Once this is loaded and parsed, begin execution
8 loadInterface();
9
10 function loadInterface() {
11
12 // Get the dimensions of the screen available to the page
13 var width = window.innerWidth;
14 var height = window.innerHeight;
15
16 // The injection point into the HTML page
17 interfaceContext.insertPoint = document.getElementById("topLevelBody");
18 var testContent = document.createElement('div');
19
20 testContent.id = 'testContent';
21
22
23 // Create APE specific metric functions
24 audioEngineContext.metric.initialiseTest = function()
25 {
26 };
27
28 audioEngineContext.metric.sliderMoved = function()
29 {
30 var id = this.data;
31 this.data = -1;
32 var position = convSliderPosToRate(id);
33 console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id
34 if (audioEngineContext.timer.testStarted)
35 {
36 audioEngineContext.audioObjects[id].metric.moved(time,position);
37 }
38 };
39
40 audioEngineContext.metric.sliderPlayed = function(id)
41 {
42 var time = audioEngineContext.timer.getTestTime();
43 if (audioEngineContext.timer.testStarted)
44 {
45 if (this.lastClicked >= 0)
46 {
47 audioEngineContext.audioObjects[this.lastClicked].metric.listening(time);
48 }
49 this.lastClicked = id;
50 audioEngineContext.audioObjects[id].metric.listening(time);
51 }
52 console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id
53 };
54
55 // Bindings for interfaceContext
56 Interface.prototype.checkAllPlayed = function()
57 {
58 hasBeenPlayed = audioEngineContext.checkAllPlayed();
59 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet
60 {
61 str = "";
62 if (hasBeenPlayed.length > 1) {
63 for (var i=0; i<hasBeenPlayed.length; i++) {
64 str = str + hasBeenPlayed[i];
65 if (i < hasBeenPlayed.length-2){
66 str += ", ";
67 } else if (i == hasBeenPlayed.length-2) {
68 str += " or ";
69 }
70 }
71 alert('You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
72 } else {
73 alert('You have not played fragment ' + hasBeenPlayed[0] + ' yet. Please listen, rate and comment all samples before submitting.');
74 }
75 return false;
76 }
77 return true;
78 };
79
80 Interface.prototype.checkAllMoved = function() {
81 var audioObjs = audioEngineContext.audioObjects;
82 var state = true;
83 var strNums = [];
84 for (var i=0; i<audioObjs.length; i++)
85 {
86 if (audioObjs[i].metric.wasMoved == false && audioObjs[i].specification.type != 'outsidereference') {
87 state = false;
88 strNums.push(i);
89 }
90 }
91 if (state == false) {
92 if (strNums.length > 1) {
93 var str = "";
94 for (var i=0; i<strNums.length; i++) {
95 str = str + strNums[i];
96 if (i < strNums.length-2){
97 str += ", ";
98 } else if (i == strNums.length-2) {
99 str += " or ";
100 }
101 }
102 alert('You have not moved fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
103 } else {
104 alert('You have not moved fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.');
105 }
106 }
107 return state;
108 };
109
110 Interface.prototype.checkAllCommented = function() {
111 var audioObjs = audioEngineContext.audioObjects;
112 var audioHolder = testState.stateMap[testState.stateIndex];
113 var state = true;
114 if (audioHolder.elementComments) {
115 var strNums = [];
116 for (var i=0; i<audioObjs.length; i++)
117 {
118 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) {
119 state = false;
120 strNums.push(i);
121 }
122 }
123 if (state == false) {
124 if (strNums.length > 1) {
125 var str = "";
126 for (var i=0; i<strNums.length; i++) {
127 str = str + strNums[i];
128 if (i < strNums.length-2){
129 str += ", ";
130 } else if (i == strNums.length-2) {
131 str += " or ";
132 }
133 }
134 alert('You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
135 } else {
136 alert('You have not commented on fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.');
137 }
138 }
139 }
140 return state;
141 };
142
143 Interface.prototype.checkScaleRange = function()
144 {
145 var audioObjs = audioEngineContext.audioObjects;
146 var audioHolder = testState.stateMap[testState.stateIndex];
147 var interfaces = audioHolder.interfaces;
148
149 var minRanking = audioObjs[0].interfaceDOM.getValue();
150 var maxRanking = minRanking;
151
152 var minScale;
153 var maxScale;
154 for (var i=0; i<interfaces[0].options.length; i++)
155 {
156 if (interfaces[0].options[i].check == "scalerange") {
157 minScale = interfaces[0].options[i].min;
158 maxScale = interfaces[0].options[i].max;
159 }
160 }
161
162 for (var i=1; i<audioObjs.length; i++){
163 if (audioObjs[i].specification.type != 'outsidereference') {
164 var ranking = audioObjs[i].interfaceDOM.getValue();
165 if (ranking < minRanking) { minRanking = ranking;}
166 if (ranking > maxRanking) { maxRanking = ranking;}
167 }
168 }
169 if (minRanking > minScale || maxRanking < maxScale) {
170 alert('Please use the full width of the scale');
171 return false;
172 } else {
173 return true;
174 }
175 };
176
177 // Bindings for audioObjects
178
179 // Create the top div for the Title element
180 var titleAttr = specification.title;
181 var title = document.createElement('div');
182 title.className = "title";
183 title.align = "center";
184 var titleSpan = document.createElement('span');
185
186 // Set title to that defined in XML, else set to default
187 if (titleAttr != undefined) {
188 titleSpan.textContent = titleAttr;
189 } else {
190 titleSpan.textContent = 'Listening test';
191 }
192 // Insert the titleSpan element into the title div element.
193 title.appendChild(titleSpan);
194
195 var pagetitle = document.createElement('div');
196 pagetitle.className = "pageTitle";
197 pagetitle.align = "center";
198 var titleSpan = document.createElement('span');
199 titleSpan.id = "pageTitle";
200 pagetitle.appendChild(titleSpan);
201
202 // Create Interface buttons!
203 var interfaceButtons = document.createElement('div');
204 interfaceButtons.id = 'interface-buttons';
205
206 // Create playback start/stop points
207 var playback = document.createElement("button");
208 playback.innerHTML = 'Stop';
209 playback.id = 'playback-button';
210 // onclick function. Check if it is playing or not, call the correct function in the
211 // audioEngine, change the button text to reflect the next state.
212 playback.onclick = function() {
213 if (audioEngineContext.status == 1) {
214 audioEngineContext.stop();
215 this.innerHTML = 'Stop';
216 var time = audioEngineContext.timer.getTestTime();
217 console.log('Stopped at ' + time); // DEBUG/SAFETY
218 }
219 };
220 // Create Submit (save) button
221 var submit = document.createElement("button");
222 submit.innerHTML = 'Submit';
223 submit.onclick = buttonSubmitClick;
224 submit.id = 'submit-button';
225 // Append the interface buttons into the interfaceButtons object.
226 interfaceButtons.appendChild(playback);
227 interfaceButtons.appendChild(submit);
228
229 // Now create the slider and HTML5 canvas boxes
230
231 // Create the div box to center align
232 var sliderBox = document.createElement('div');
233 sliderBox.className = 'sliderCanvasDiv';
234 sliderBox.id = 'sliderCanvasHolder';
235
236 // Create the slider box to hold the slider elements
237 var canvas = document.createElement('div');
238 canvas.id = 'slider';
239 canvas.align = "left";
240 canvas.addEventListener('dragover',function(event){
241 event.preventDefault();
242 event.dataTransfer.effectAllowed = 'none';
243 event.dataTransfer.dropEffect = 'copy';
244 return false;
245 },false);
246 var sliderMargin = document.createAttribute('marginsize');
247 sliderMargin.nodeValue = 42; // Set default margins to 42px either side
248 // Must have a known EXACT width, as this is used later to determine the ratings
249 var w = (Number(sliderMargin.nodeValue)+8)*2;
250 canvas.style.width = width - w +"px";
251 canvas.style.marginLeft = sliderMargin.nodeValue +'px';
252 canvas.setAttributeNode(sliderMargin);
253 sliderBox.appendChild(canvas);
254
255 // Create the div to hold any scale objects
256 var scale = document.createElement('div');
257 scale.className = 'sliderScale';
258 scale.id = 'sliderScaleHolder';
259 scale.align = 'left';
260 sliderBox.appendChild(scale);
261
262 // Global parent for the comment boxes on the page
263 var feedbackHolder = document.createElement('div');
264 feedbackHolder.id = 'feedbackHolder';
265
266 testContent.style.zIndex = 1;
267 interfaceContext.insertPoint.innerHTML = null; // Clear the current schema
268
269 // Inject into HTML
270 testContent.appendChild(title); // Insert the title
271 testContent.appendChild(pagetitle);
272 testContent.appendChild(interfaceButtons);
273 testContent.appendChild(sliderBox);
274 testContent.appendChild(feedbackHolder);
275 interfaceContext.insertPoint.appendChild(testContent);
276
277 // Load the full interface
278 testState.initialise();
279 testState.advanceState();
280
281 }
282
283 function loadTest(audioHolderObject)
284 {
285
286 // Reset audioEngineContext.Metric globals for new test
287 audioEngineContext.newTestPage();
288
289 var id = audioHolderObject.id;
290
291 var feedbackHolder = document.getElementById('feedbackHolder');
292 var canvas = document.getElementById('slider');
293 feedbackHolder.innerHTML = null;
294 canvas.innerHTML = null;
295
296 var interfaceObj = audioHolderObject.interfaces;
297 for (var k=0; k<interfaceObj.length; k++) {
298 for (var i=0; i<interfaceObj[k].options.length; i++)
299 {
300 if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'playhead')
301 {
302 var playbackHolder = document.getElementById('playback-holder');
303 if (playbackHolder == null)
304 {
305 playbackHolder = document.createElement('div');
306 playbackHolder.style.width = "100%";
307 playbackHolder.align = 'center';
308 playbackHolder.appendChild(interfaceContext.playhead.object);
309 feedbackHolder.appendChild(playbackHolder);
310 }
311 } else if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'page-count')
312 {
313 var pagecountHolder = document.getElementById('page-count');
314 if (pagecountHolder == null)
315 {
316 pagecountHolder = document.createElement('div');
317 pagecountHolder.id = 'page-count';
318 }
319 pagecountHolder.innerHTML = '<span>Test '+(audioHolderObject.presentedId+1)+' of '+specification.audioHolders.length+'</span>';
320 var inject = document.getElementById('interface-buttons');
321 inject.appendChild(pagecountHolder);
322 }
323 }
324 }
325 // Setup question title
326
327 var commentBoxPrefix = "Comment on track";
328 if (interfaceObj.length != 0) {
329 interfaceObj = interfaceObj[0];
330 var titleNode = interfaceObj.title;
331 if (titleNode != undefined)
332 {
333 document.getElementById('pageTitle').textContent = titleNode;
334 }
335 var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2);
336 var offset = Number(document.getElementById('slider').attributes['marginsize'].value);
337 var scale = document.getElementById('sliderScaleHolder');
338 scale.innerHTML = null;
339 $(interfaceObj.scale).each(function(index,scaleObj){
340 var value = document.createAttribute('value');
341 var position = Number(scaleObj[0])*0.01;
342 value.nodeValue = position;
343 var pixelPosition = (position*positionScale)+offset;
344 var scaleDOM = document.createElement('span');
345 scaleDOM.textContent = scaleObj[1];
346 scale.appendChild(scaleDOM);
347 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
348 scaleDOM.setAttributeNode(value);
349 });
350
351 if (interfaceObj.commentBoxPrefix != undefined) {
352 commentBoxPrefix = interfaceObj.commentBoxPrefix;
353 }
354 }
355
356 /// CHECK FOR SAMPLE RATE COMPATIBILITY
357 if (audioHolderObject.sampleRate != undefined) {
358 if (Number(audioHolderObject.sampleRate) != audioContext.sampleRate) {
359 var errStr = 'Sample rates do not match! Requested '+Number(audioHolderObject.sampleRate)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.';
360 alert(errStr);
361 return;
362 }
363 }
364
365 var commentShow = audioHolderObject.elementComments;
366
367 var loopPlayback = audioHolderObject.loop;
368
369 audioEngineContext.loopPlayback = loopPlayback;
370 // Create AudioEngine bindings for playback
371 audioEngineContext.selectedTrack = function(id) {
372 console.log('Deprecated');
373 };
374
375 currentTestHolder = document.createElement('audioHolder');
376 currentTestHolder.id = audioHolderObject.id;
377 currentTestHolder.repeatCount = audioHolderObject.repeatCount;
378
379 // Delete any previous audioObjects associated with the audioEngine
380 audioEngineContext.audioObjects = [];
381 interfaceContext.deleteCommentBoxes();
382 interfaceContext.deleteCommentQuestions();
383
384 // Find all the audioElements from the audioHolder
385 $(audioHolderObject.audioElements).each(function(index,element){
386 // Find URL of track
387 // In this jQuery loop, variable 'this' holds the current audioElement.
388
389 // Now load each audio sample. First create the new track by passing the full URL
390 var trackURL = audioHolderObject.hostURL + element.url;
391 var audioObject = audioEngineContext.newTrack(element);
392
393 var node = interfaceContext.createCommentBox(audioObject);
394
395 // Create a slider per track
396 audioObject.interfaceDOM = new sliderObject(audioObject);
397
398 // Distribute it randomnly
399 var w = window.innerWidth - (offset+8)*2;
400 w = Math.random()*w;
401 w = Math.floor(w+(offset+8));
402 audioObject.interfaceDOM.trackSliderObj.style.left = w+'px';
403
404 canvas.appendChild(audioObject.interfaceDOM.trackSliderObj);
405 audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj));
406
407 });
408 if (commentShow) {
409 interfaceContext.showCommentBoxes(feedbackHolder,true);
410 }
411
412 $(audioHolderObject.commentQuestions).each(function(index,element) {
413 var node = interfaceContext.createCommentQuestion(element);
414 feedbackHolder.appendChild(node.holder);
415 });
416
417 // Construct outside reference;
418 if (audioHolderObject.outsideReference != null) {
419 var outsideReferenceHolder = document.createElement('div');
420 outsideReferenceHolder.id = 'outside-reference';
421 outsideReferenceHolderspan = document.createElement('span');
422 outsideReferenceHolderspan.textContent = 'Reference';
423 outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
424
425 var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference);
426
427 outsideReferenceHolder.onclick = function(event)
428 {
429 audioEngineContext.play(audioEngineContext.audioObjects.length-1);
430 $('.track-slider').removeClass('track-slider-playing');
431 $('.comment-div').removeClass('comment-box-playing');
432 if (event.currentTarget.nodeName == 'DIV') {
433 $(event.currentTarget).addClass('track-slider-playing');
434 } else {
435 $(event.currentTarget.parentElement).addClass('track-slider-playing');
436 }
437 };
438
439 document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
440 }
441
442
443 //testWaitIndicator();
444 }
445
446 function sliderObject(audioObject) {
447 // Create a new slider object;
448 this.parent = audioObject;
449 this.trackSliderObj = document.createElement('div');
450 this.trackSliderObj.className = 'track-slider track-slider-disabled';
451 this.trackSliderObj.id = 'track-slider-'+audioObject.id;
452
453 this.trackSliderObj.setAttribute('trackIndex',audioObject.id);
454 this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>';
455 this.trackSliderObj.draggable = true;
456 this.trackSliderObj.ondragend = dragEnd;
457
458 this.trackSliderObj.ondragstart = function(event){
459 event.dataTransfer.setData('Text',null);
460 };
461
462 this.trackSliderObj.ondrop = function(event)
463 {
464 if(event.stopPropagation) {event.stopPropagation();}
465 return false;
466 };
467
468 // Onclick, switch playback to that track
469 this.trackSliderObj.onclick = function(event) {
470 // Cannot continue to issue play command until audioObjects reported as ready!
471 // Get the track ID from the object ID
472 var element;
473 if (event.currentTarget.nodeName == "SPAN") {
474 element = event.currentTarget.parentNode;
475 } else {
476 element = event.currentTarget;
477 }
478 var id = Number(element.attributes['trackIndex'].value);
479 //audioEngineContext.metric.sliderPlayed(id);
480 audioEngineContext.play(id);
481 // Currently playing track red, rest green
482
483 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
484 $('.track-slider').removeClass('track-slider-playing');
485 $(element).addClass('track-slider-playing');
486 $('.comment-div').removeClass('comment-box-playing');
487 $('#comment-div-'+id).addClass('comment-box-playing');
488 var outsideReference = document.getElementById('outside-reference');
489 if (outsideReference != undefined)
490 $(outsideReference).removeClass('track-slider-playing');
491 };
492
493 this.enable = function() {
494 if (this.parent.state == 1)
495 {
496 $(this.trackSliderObj).removeClass('track-slider-disabled');
497 }
498 };
499
500 this.exportXMLDOM = function(audioObject) {
501 // Called by the audioObject holding this element. Must be present
502 var node = document.createElement('value');
503 node.textContent = convSliderPosToRate(this.trackSliderObj);
504 return node;
505 };
506 this.getValue = function() {
507 return convSliderPosToRate(this.trackSliderObj);
508 };
509 }
510
511 function dragEnd(ev) {
512 // Function call when a div has been dropped
513 var slider = document.getElementById('slider');
514 var marginSize = Number(slider.attributes['marginsize'].value);
515 var w = slider.style.width;
516 w = Number(w.substr(0,w.length-2));
517 var x = ev.screenX;
518
519 x += Math.abs(window.screenX);
520 x = x % window.outerWidth;
521
522 if (x >= marginSize && x < w+marginSize) {
523 this.style.left = (x)+'px';
524 } else {
525 if (x<marginSize) {
526 this.style.left = marginSize+'px';
527 } else {
528 this.style.left = (w+marginSize) + 'px';
529 }
530 }
531 var time = audioEngineContext.timer.getTestTime();
532 var id = Number(ev.currentTarget.getAttribute('trackindex'));
533 audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.currentTarget));
534 console.log('slider '+id+' moved to '+convSliderPosToRate(ev.currentTarget)+' ('+time+')');
535 }
536
537 function buttonSubmitClick()
538 {
539 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options;
540 var canContinue = true;
541
542 // Check that the anchor and reference objects are correctly placed
543 if (interfaceContext.checkHiddenAnchor() == false) {return;}
544 if (interfaceContext.checkHiddenReference() == false) {return;}
545
546 for (var i=0; i<checks.length; i++) {
547 if (checks[i].type == 'check')
548 {
549 switch(checks[i].check) {
550 case 'fragmentPlayed':
551 // Check if all fragments have been played
552 var checkState = interfaceContext.checkAllPlayed();
553 if (checkState == false) {canContinue = false;}
554 break;
555 case 'fragmentFullPlayback':
556 // Check all fragments have been played to their full length
557 var checkState = interfaceContext.checkAllPlayed();
558 if (checkState == false) {canContinue = false;}
559 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead');
560 break;
561 case 'fragmentMoved':
562 // Check all fragment sliders have been moved.
563 var checkState = interfaceContext.checkAllMoved();
564 if (checkState == false) {canContinue = false;}
565 break;
566 case 'fragmentComments':
567 // Check all fragment sliders have been moved.
568 var checkState = interfaceContext.checkAllCommented();
569 if (checkState == false) {canContinue = false;}
570 break;
571 case 'scalerange':
572 // Check the scale is used to its full width outlined by the node
573 var checkState = interfaceContext.checkScaleRange();
574 if (checkState == false) {canContinue = false;}
575 break;
576 }
577
578 }
579 if (!canContinue) {break;}
580 }
581
582 if (canContinue) {
583 if (audioEngineContext.status == 1) {
584 var playback = document.getElementById('playback-button');
585 playback.click();
586 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
587 } else
588 {
589 if (audioEngineContext.timer.testStarted == false)
590 {
591 alert('You have not started the test! Please press start to begin the test!');
592 return;
593 }
594 }
595 testState.advanceState();
596 }
597 }
598
599 function convSliderPosToRate(slider)
600 {
601 var w = document.getElementById('slider').style.width;
602 var marginsize = Number(document.getElementById('slider').attributes['marginsize'].value);
603 var maxPix = w.substr(0,w.length-2);
604 var pix = slider.style.left;
605 pix = pix.substr(0,pix.length-2);
606 var rate = (pix-marginsize)/maxPix;
607 return rate;
608 }
609
610 function resizeWindow(event){
611 // Function called when the window has been resized.
612 // MANDATORY FUNCTION
613
614 // Store the slider marker values
615 var holdValues = [];
616 $(".track-slider").each(function(index,sliderObj){
617 holdValues.push(convSliderPosToRate(sliderObj));
618 });
619
620 var width = event.target.innerWidth;
621 var canvas = document.getElementById('sliderCanvasHolder');
622 var sliderDiv = canvas.children[0];
623 var sliderScaleDiv = canvas.children[1];
624 var marginsize = Number(sliderDiv.attributes['marginsize'].value);
625 var w = (marginsize+8)*2;
626 sliderDiv.style.width = width - w + 'px';
627 var width = width - w;
628 // Move sliders into new position
629 $(".track-slider").each(function(index,sliderObj){
630 var pos = holdValues[index];
631 var pix = pos * width;
632 sliderObj.style.left = pix+marginsize+'px';
633 });
634
635 // Move scale labels
636 $(sliderScaleDiv.children).each(function(index,scaleObj){
637 var position = Number(scaleObj.attributes['value'].value);
638 var pixelPosition = (position*width)+marginsize;
639 scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px';
640 });
641 }
642
643 function pageXMLSave(store, testXML)
644 {
645 // Saves a specific test page
646 var xmlDoc = store;
647 // Check if any session wide metrics are enabled
648
649 var commentShow = testXML.elementComments;
650
651 var metric = document.createElement('metric');
652 if (audioEngineContext.metric.enableTestTimer)
653 {
654 var testTime = document.createElement('metricResult');
655 testTime.id = 'testTime';
656 testTime.textContent = audioEngineContext.timer.testDuration;
657 metric.appendChild(testTime);
658 }
659 xmlDoc.appendChild(metric);
660 var audioObjects = audioEngineContext.audioObjects;
661 for (var i=0; i<audioObjects.length; i++)
662 {
663 var audioElement = audioEngineContext.audioObjects[i].exportXMLDOM();
664 audioElement.setAttribute('presentedId',i);
665 xmlDoc.appendChild(audioElement);
666 }
667
668 $(interfaceContext.commentQuestions).each(function(index,element){
669 var node = element.exportXMLDOM();
670 xmlDoc.appendChild(node);
671 });
672 store = xmlDoc;
673 }