nickjillings@2161: /** nickjillings@2161: * WAET Blank Template nickjillings@2161: * Use this to start building your custom interface nickjillings@2161: */ nickjillings@2161: nickjillings@2161: // Once this is loaded and parsed, begin execution n@2695: /* globals interfaceContext, Interface, testState, audioEngineContext, console, document, window, feedbackHolder, $, specification, storage*/ nickjillings@2161: loadInterface(); nickjillings@2161: nickjillings@2161: function loadInterface() { nicholas@2538: // Use this to do any one-time page / element construction. For instance, placing any stationary text objects, nicholas@2538: // holding div's, or setting up any nodes which are present for the entire test sequence nicholas@2538: nicholas@2381: interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema nicholas@2538: nickjillings@2161: // Custom comparator Object nicholas@2880: interfaceContext.comparator = null; nicholas@2538: nickjillings@2161: // The injection point into the HTML page nicholas@2538: interfaceContext.insertPoint = document.getElementById("topLevelBody"); nicholas@2538: var testContent = document.createElement('div'); nicholas@2538: testContent.id = 'testContent'; nicholas@2538: nickjillings@2161: // Create the top div for the Title element nicholas@2538: var titleAttr = specification.title; nicholas@2538: var title = document.createElement('div'); nicholas@2538: title.className = "title"; nicholas@2538: title.align = "center"; nicholas@2538: var titleSpan = document.createElement('span'); nicholas@2470: titleSpan.id = "test-title"; nicholas@2538: nickjillings@2161: // Set title to that defined in XML, else set to default n@2695: if (titleAttr !== undefined) { nicholas@2538: titleSpan.textContent = titleAttr; nicholas@2538: } else { nicholas@2538: titleSpan.textContent = 'Listening test'; nicholas@2538: } nicholas@2538: // Insert the titleSpan element into the title div element. nicholas@2538: title.appendChild(titleSpan); nicholas@2538: nickjillings@2161: var pagetitle = document.createElement('div'); nicholas@2538: pagetitle.className = "pageTitle"; nicholas@2538: pagetitle.align = "center"; n@2695: n@2695: titleSpan = document.createElement('span'); nicholas@2538: titleSpan.id = "pageTitle"; nicholas@2538: pagetitle.appendChild(titleSpan); nicholas@2538: nicholas@2538: // Create Interface buttons! nicholas@2538: var interfaceButtons = document.createElement('div'); nicholas@2538: interfaceButtons.id = 'interface-buttons'; nicholas@2538: interfaceButtons.style.height = '25px'; nicholas@2538: nicholas@2538: // Create playback start/stop points nicholas@2538: var playback = document.createElement("button"); nicholas@2538: playback.innerHTML = 'Stop'; nicholas@2538: playback.id = 'playback-button'; nicholas@2538: playback.style.float = 'left'; nicholas@2538: // onclick function. Check if it is playing or not, call the correct function in the nicholas@2538: // audioEngine, change the button text to reflect the next state. nicholas@2538: playback.onclick = function () { nicholas@2538: if (audioEngineContext.status == 1) { nicholas@2538: audioEngineContext.stop(); nicholas@2538: this.innerHTML = 'Stop'; nickjillings@2161: var time = audioEngineContext.timer.getTestTime(); nickjillings@2161: console.log('Stopped at ' + time); // DEBUG/SAFETY nicholas@2538: } nicholas@2538: }; nicholas@2538: // Append the interface buttons into the interfaceButtons object. nicholas@2538: interfaceButtons.appendChild(playback); nicholas@2538: nicholas@2538: // Global parent for the comment boxes on the page nicholas@2538: var feedbackHolder = document.createElement('div'); nicholas@2538: feedbackHolder.id = 'feedbackHolder'; nicholas@2538: nicholas@2538: // Construct the AB Boxes nicholas@2538: var boxes = document.createElement('div'); nicholas@2538: boxes.align = "center"; nicholas@2538: boxes.id = "box-holders"; nicholas@2538: nicholas@3044: var submitHolder = document.createElement("div"); n@3095: submitHolder.id = "submit-holder"; nicholas@2538: var submit = document.createElement('button'); nicholas@2538: submit.id = "submit"; nicholas@2538: submit.onclick = buttonSubmitClick; nicholas@2538: submit.className = "big-button"; nicholas@2538: submit.textContent = "submit"; nicholas@3044: submitHolder.appendChild(submit); nicholas@2538: nicholas@2538: feedbackHolder.appendChild(boxes); nicholas@2538: nicholas@2475: // Create holder for comment boxes nicholas@2475: var comments = document.createElement("div"); nicholas@2475: comments.id = "comment-box-holder"; nicholas@2538: nicholas@2538: // Inject into HTML nicholas@2538: testContent.appendChild(title); // Insert the title nicholas@2538: testContent.appendChild(pagetitle); nicholas@2538: testContent.appendChild(interfaceButtons); nicholas@2538: testContent.appendChild(feedbackHolder); nicholas@3044: testContent.appendChild(submitHolder); nicholas@2475: testContent.appendChild(comments); nicholas@2538: interfaceContext.insertPoint.appendChild(testContent); nickjillings@2161: nicholas@2538: // Load the full interface nicholas@2538: testState.initialise(); nicholas@2538: testState.advanceState(); n@2695: } nickjillings@2161: nicholas@2538: function loadTest(page) { nicholas@2538: // Called each time a new test page is to be build. The page specification node is the only item passed in nicholas@2381: document.getElementById('box-holders').innerHTML = ""; nicholas@2538: nicholas@2651: var interfaceObj = interfaceContext.getCombinedInterfaces(page); nicholas@2538: if (interfaceObj.length > 1) { nicholas@2538: console.log("WARNING - This interface only supports one node per page. Using first interface node"); nicholas@2538: } nicholas@2538: interfaceObj = interfaceObj[0]; nicholas@2538: nicholas@2475: var commentHolder = document.getElementById("comment-box-holder"); nicholas@2475: commentHolder.innerHTML = ""; nicholas@2538: nicholas@2470: // Set the page title nicholas@2470: if (typeof page.title == "string" && page.title.length > 0) { n@2695: document.getElementById("test-title").textContent = page.title; nicholas@2470: } nicholas@2538: n@2695: if (interfaceObj.title !== null) { nicholas@2538: document.getElementById("pageTitle").textContent = interfaceObj.title; nicholas@2538: } nicholas@2538: nicholas@2781: if (interfaceObj.image !== undefined) { nicholas@2781: feedbackHolder.insertBefore(interfaceContext.imageHolder.root, document.getElementById("box-holders")); nicholas@2781: interfaceContext.imageHolder.setImage(interfaceObj.image); nicholas@2781: } nicholas@2781: nicholas@2469: interfaceContext.comparator = new comparator(page); nicholas@2538: nicholas@2651: var interfaceOptions = interfaceObj.options; nicholas@2538: for (var option of interfaceOptions) { nicholas@2538: if (option.type == "show") { nicholas@2538: switch (option.name) { nickjillings@2163: case "playhead": nickjillings@2163: var playbackHolder = document.getElementById('playback-holder'); n@2695: if (playbackHolder === null) { nickjillings@2163: playbackHolder = document.createElement('div'); nickjillings@2163: playbackHolder.style.width = "100%"; nickjillings@2163: playbackHolder.style.float = "left"; nickjillings@2163: playbackHolder.align = 'center'; nickjillings@2163: playbackHolder.appendChild(interfaceContext.playhead.object); nickjillings@2163: feedbackHolder.appendChild(playbackHolder); nickjillings@2163: } nickjillings@2163: break; nickjillings@2163: case "page-count": nickjillings@2163: var pagecountHolder = document.getElementById('page-count'); n@2695: if (pagecountHolder === null) { nickjillings@2163: pagecountHolder = document.createElement('div'); nickjillings@2163: pagecountHolder.id = 'page-count'; nickjillings@2163: } nicholas@2538: pagecountHolder.innerHTML = 'Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + ''; nickjillings@2163: var inject = document.getElementById('interface-buttons'); nickjillings@2163: inject.appendChild(pagecountHolder); nickjillings@2163: break; nickjillings@2163: case "volume": n@2695: if (document.getElementById('master-volume-holder') === null) { nickjillings@2163: feedbackHolder.appendChild(interfaceContext.volume.object); nickjillings@2163: } nickjillings@2163: break; nicholas@2469: case "comments": nicholas@2469: // Generate one comment box per presented page nicholas@2538: for (var element of audioEngineContext.audioObjects) { nicholas@2469: interfaceContext.commentBoxes.createCommentBox(element); nicholas@2469: } nicholas@2538: interfaceContext.commentBoxes.showCommentBoxes(commentHolder, true); nicholas@2469: break; nickjillings@2163: } nickjillings@2163: } nickjillings@2163: } nicholas@2538: nicholas@2538: $(page.commentQuestions).each(function (index, element) { nicholas@2538: var node = interfaceContext.createCommentQuestion(element); nicholas@2538: commentHolder.appendChild(node.holder); nicholas@2538: }); nicholas@2538: nickjillings@2163: resizeWindow(null); nickjillings@2161: } nickjillings@2161: nicholas@2538: function comparator(page) { nickjillings@2161: // Build prototype constructor nicholas@2538: this.interfaceObject = function (element, label) { nickjillings@2161: // An example node, you can make this however you want for each audioElement. nickjillings@2161: // However, every audioObject (audioEngineContext.audioObject) MUST have an interface object with the following nickjillings@2161: // You attach them by calling audioObject.bindInterface( ) nickjillings@2161: this.parent = element; nickjillings@2161: this.id = element.id; nickjillings@2161: this.value = 0; nickjillings@2161: this.disabled = true; nickjillings@2161: this.box = document.createElement('div'); nickjillings@2161: this.box.className = 'comparator-holder'; nicholas@2538: this.box.setAttribute('track-id', element.id); nicholas@2538: this.box.id = 'comparator-' + label; nickjillings@2161: this.selector = document.createElement('div'); nicholas@2538: this.selector.className = 'comparator-selector disabled'; nicholas@2538: var selectorText = document.createElement('span'); nicholas@2538: selectorText.textContent = label; nicholas@2538: this.selector.appendChild(selectorText); nicholas@2538: this.playback = document.createElement('button'); nicholas@2538: this.playback.className = 'comparator-button'; nicholas@2538: this.playback.disabled = true; nicholas@2538: this.playback.textContent = "Listen"; nicholas@2806: if (element.specification.image) { nicholas@2806: this.selector.className += " comparator-image"; nicholas@2806: var image = document.createElement("img"); nicholas@2806: image.src = element.specification.image; nicholas@2806: image.className = "comparator-image"; nicholas@2806: this.selector.appendChild(image); nicholas@2806: } else if (label === "X") { nicholas@2806: this.selector.classList.add('inactive'); nicholas@2806: } nicholas@2538: this.box.appendChild(this.selector); nicholas@2538: this.box.appendChild(this.playback); n@2695: this.selectorClicked = function (event) { nicholas@2538: if (label == "X" || label == "x") { nicholas@2538: return; nickjillings@2161: } nicholas@2538: var time = audioEngineContext.timer.getTestTime(); n@2695: if (this.disabled) { n@2695: interfaceContext.lightbox.post("Message", "Please wait until sample has loaded"); nicholas@2538: console.log("Please wait until sample has loaded"); nicholas@2538: return; nicholas@2538: } n@2695: if (audioEngineContext.status === 0) { nicholas@2538: interfaceContext.lightbox.post("Message", "Please listen to the samples before making a selection"); nicholas@2538: console.log("Please listen to the samples before making a selection"); nicholas@2538: return; nicholas@2538: } n@2695: interfaceContext.comparator.selected = this.id; n@2695: $(".comparator-selector").removeClass('selected'); n@2695: $(this.selector).addClass('selected'); n@2695: interfaceContext.comparator.pair.forEach(function (obj) { n@2835: obj.value = 1.0 * (obj === this); n@2695: obj.parent.metric.moved(time, obj.value); n@2835: }, this); n@2695: console.log("Selected " + this.id + ' (' + time + ')'); nicholas@2538: }; nicholas@2538: this.playback.setAttribute("playstate", "ready"); n@2695: this.playbackClicked = function (event) { n@2695: if (this.playback.getAttribute("playstate") == "ready") { n@2695: audioEngineContext.play(this.id); nickjillings@2161: } else if (event.currentTarget.getAttribute("playstate") == "playing") { nickjillings@2161: audioEngineContext.stop(); nickjillings@2161: } nicholas@2538: nicholas@2538: }; n@2695: this.handleEvent = function (event) { n@2695: if (event.currentTarget === this.playback) { n@2695: this.playbackClicked(event); n@2695: } else if (event.currentTarget === this.selector) { n@2695: this.selectorClicked(event); n@2695: } n@2695: }; n@2695: this.playback.addEventListener("click", this); n@2695: this.selector.addEventListener("click", this); nicholas@2538: this.enable = function () { nickjillings@2161: // This is used to tell the interface object that playback of this node is ready nicholas@2538: if (this.parent.state == 1) { nicholas@2538: $(this.selector).removeClass('disabled'); nicholas@2538: this.playback.disabled = false; n@2695: this.disabled = false; nicholas@2538: } nickjillings@2161: }; nicholas@2538: this.updateLoading = function (progress) { nickjillings@2161: // progress is a value from 0 to 100 indicating the current download state of media files nicholas@2935: if (progress != 100 && label.toLowerCase() != "x") { nicholas@2538: progress = String(progress); nicholas@2538: progress = progress.split('.')[0]; nicholas@2538: this.playback.textContent = progress + '%'; nicholas@2538: } else { nicholas@2538: this.playback.textContent = "Play"; nicholas@2538: } nickjillings@2161: }; nicholas@2538: this.error = function () { nickjillings@2161: // audioObject has an error!! nickjillings@2161: this.playback.textContent = "Error"; nickjillings@2161: $(this.playback).addClass("error-colour"); nickjillings@2161: }; nicholas@2538: this.startPlayback = function () { n@2428: if (this.parent.specification.parent.playOne || specification.playOne) { n@2428: $('.comparator-button').text('Wait'); nicholas@2538: $('.comparator-button').attr("disabled", "true"); nicholas@2503: $(this.playback).removeAttr("disabled"); n@2428: } else { n@2428: $('.comparator-button').text('Listen'); n@2428: } nickjillings@2161: $(this.playback).text('Stop'); nicholas@2538: this.playback.setAttribute("playstate", "playing"); nicholas@2726: interfaceContext.commentBoxes.highlightById(element.id); nickjillings@2161: }; nicholas@2538: this.stopPlayback = function () { n@2428: if (this.playback.getAttribute("playstate") == "playing") { nicholas@2936: $(this.playback).text('Listen'); nicholas@2936: $(this.playback).removeAttr("disabled"); nicholas@2538: this.playback.setAttribute("playstate", "ready"); n@2428: } nicholas@2726: var box = interfaceContext.commentBoxes.boxes.find(function (a) { nicholas@2726: return a.id === element.id; nicholas@2726: }); nicholas@2726: if (box) { nicholas@2726: box.highlight(false); nicholas@2726: } nickjillings@2161: }; nicholas@2538: this.getValue = function () { nickjillings@2161: // Return the current value of the object. If there is no value, return 0 nickjillings@2161: return this.value; nickjillings@2161: }; nicholas@2538: this.getPresentedId = function () { nickjillings@2161: // Return the presented ID of the object. For instance, the APE has sliders starting from 0. Whilst AB has alphabetical scale nickjillings@2161: return this.selector.children[0].textContent; nickjillings@2161: }; nicholas@2538: this.canMove = function () { nickjillings@2161: // Return either true or false if the interface object can be moved. AB / Reference cannot, whilst sliders can and therefore have a continuous scale. nickjillings@2161: // These are checked primarily if the interface check option 'fragmentMoved' is enabled. nickjillings@2161: return false; nickjillings@2161: }; nicholas@2538: this.exportXMLDOM = function (audioObject) { nickjillings@2161: // Called by the audioObject holding this element to export the interface node. nickjillings@2161: // If there is no value node (such as outside reference), return null nickjillings@2161: // If there are multiple value nodes (such as multiple scale / 2D scales), return an array of nodes with each value node having an 'interfaceName' attribute nickjillings@2161: // Use storage.document.createElement('value'); to generate the XML node. nickjillings@2161: var node = storage.document.createElement('value'); nicholas@2538: node.textContent = this.value; nicholas@2538: return node; nickjillings@2161: nickjillings@2161: }; nicholas@2538: this.error = function () { nickjillings@2161: // If there is an error with the audioObject, this will be called to indicate a failure n@2695: }; n@2927: if (label == "X" || label == "x") { n@2927: this.enable(); n@2927: } nickjillings@2161: }; nickjillings@2161: // Ensure there are only two comparisons per page nickjillings@2161: if (page.audioElements.length != 2) { nicholas@2538: console.error('FATAL - There must be 2 nodes on each : ' + page.id); nickjillings@2161: return; nickjillings@2161: } nickjillings@2161: // Build the three audio elements n@2695: n@2695: function buildElement(index, audioObject) { n@2695: var label; n@2695: switch (index) { n@2695: case 0: n@2695: label = "A"; n@2695: break; n@2695: case 1: n@2695: label = "B"; n@2695: break; n@2695: default: n@2695: label = "X"; n@2695: break; n@2695: } n@2695: var node = new this.interfaceObject(audioObject, label); n@2695: audioObject.bindInterface(node); n@2695: return node; n@2695: } n@2695: nickjillings@2161: this.pair = []; nickjillings@2161: this.X = null; nickjillings@2161: this.boxHolders = document.getElementById('box-holders'); n@2695: var node; n@2695: page.audioElements.forEach(function (element, index) { nicholas@2929: if (element.type != 'normal' && element.type != "reference") { nicholas@2929: console.log("WARNING - ABX can only have normal or reference elements. Page " + page.id + ", Element " + element.id); nickjillings@2161: element.type = "normal"; nicholas@2538: } n@2695: node = buildElement.call(this, index, audioEngineContext.newTrack(element)); nickjillings@2161: this.pair.push(node); nickjillings@2161: this.boxHolders.appendChild(node.box); n@2695: }, this); nicholas@2929: // var elementId = Math.floor(Math.random() * 2); //Randomly pick A or B to be X nicholas@2929: var elementId = page.audioElements.findIndex(function (a) { nicholas@2929: return a.type == "reference"; nicholas@2929: }); nicholas@2929: if (elementId == -1) { nicholas@2929: elementId = Math.floor(Math.random() * 2); nicholas@2929: console.log("No defined 'X' given. Selecting element id " + page.audioElements[elementId].id); nicholas@2929: } nicholas@2880: var element = page.addAudioElement(); nickjillings@2161: for (var atr in page.audioElements[elementId]) { n@2695: element[atr] = page.audioElements[elementId][atr]; nickjillings@2161: } nickjillings@2161: element.id += "-X"; nicholas@2538: if (typeof element.name == "string") { nicholas@2538: element.name += "-X"; nicholas@2538: } nicholas@2958: nickjillings@2161: // Create the save place-holder for the 'X' element nickjillings@2161: var root = testState.currentStore.XMLDOM; nickjillings@2161: var aeNode = storage.document.createElement('audioelement'); nicholas@2538: aeNode.setAttribute('ref', element.id); nicholas@2538: if (typeof element.name == "string") { nicholas@2538: aeNode.setAttribute('name', element.name); nicholas@2538: } nicholas@2538: aeNode.setAttribute('type', 'normal'); nicholas@2538: aeNode.setAttribute('url', element.url); nicholas@2538: aeNode.setAttribute('gain', element.gain); nickjillings@2161: aeNode.appendChild(storage.document.createElement('metric')); nickjillings@2161: root.appendChild(aeNode); nickjillings@2161: // Build the 'X' element n@2695: var label; nickjillings@2161: var audioObject = audioEngineContext.newTrack(element); n@2695: node = buildElement.call(this, 3, audioObject); nickjillings@2161: this.X = node; nickjillings@2161: this.boxHolders.appendChild(node.box); nickjillings@2161: } nickjillings@2161: nicholas@2538: function resizeWindow(event) { nicholas@2538: document.getElementById('submit').style.left = (window.innerWidth - 250) / 2 + 'px'; nicholas@2538: var numObj = 3; nicholas@2538: var boxW = numObj * 312; nickjillings@2163: var diff = window.innerWidth - boxW; nicholas@2538: while (diff < 0) { nicholas@2538: numObj = Math.ceil(numObj / 2); nicholas@2538: boxW = numObj * 312; nickjillings@2163: diff = window.innerWidth - boxW; nickjillings@2163: } nickjillings@2161: } nickjillings@2161: nicholas@2538: function buttonSubmitClick() { nicholas@2651: var checks = testState.currentStateMap.interfaces[0].options, nicholas@2651: canContinue = true; nickjillings@2163: nicholas@2825: if (interfaceContext.checkFragmentMinPlays() === false) { nicholas@2825: return; nicholas@2825: } nicholas@3035: if (interfaceContext.checkCommentQuestions() === false) { nicholas@3035: return; nicholas@3035: } nicholas@2825: nicholas@2538: for (var i = 0; i < checks.length; i++) { nicholas@2703: var checkState = true; nicholas@2538: if (checks[i].type == 'check') { nicholas@2538: switch (checks[i].name) { nicholas@2538: case 'fragmentPlayed': nicholas@2538: // Check if all fragments have been played n@2790: checkState = interfaceContext.checkAllPlayed(checks[i].errorMessage); nicholas@2703: nicholas@2538: break; nicholas@2538: case 'fragmentFullPlayback': nicholas@2538: // Check all fragments have been played to their full length n@2790: checkState = interfaceContext.checkFragmentsFullyPlayed(checks[i].errorMessage); nicholas@2538: break; nicholas@2538: case 'fragmentMoved': nicholas@2538: // Check all fragment sliders have been moved. n@2790: checkState = interfaceContext.checkAllMoved(checks[i].errorMessage); nicholas@2538: break; nicholas@2538: case 'fragmentComments': nicholas@2538: // Check all fragment sliders have been moved. nicholas@2538: break; nicholas@2538: case 'scalerange': nicholas@2538: // Check the scale has been used effectively nicholas@2703: console.log("WARNING - Check 'scalerange' does not make sense in AB/ABX! Ignoring!"); nicholas@2538: break; nicholas@2538: default: nicholas@2538: console.log("WARNING - Check option " + checks[i].check + " is not supported on this interface"); nicholas@2538: break; nicholas@2538: } nicholas@2538: nicholas@2538: } nicholas@2703: if (checkState === false) { nicholas@2703: canContinue = false; nicholas@2538: break; nicholas@2538: } nicholas@2538: } nicholas@2703: nicholas@2538: if (canContinue) { nicholas@2538: if (audioEngineContext.status == 1) { nicholas@2538: var playback = document.getElementById('playback-button'); nicholas@2538: playback.click(); nicholas@2538: // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options nicholas@2538: } else { n@2695: if (audioEngineContext.timer.testStarted === false) { nicholas@2538: interfaceContext.lightbox.post("Warning", 'You have not started the test! Please listen to a sample to begin the test!'); nicholas@2538: return; nicholas@2538: } nicholas@2538: } nicholas@2538: testState.advanceState(); nicholas@2538: } nickjillings@2161: } nickjillings@2161: nicholas@2538: function pageXMLSave(store, pageSpecification) { nicholas@2538: // MANDATORY nicholas@2538: // Saves a specific test page nicholas@2538: // You can use this space to add any extra nodes to your XML saves nicholas@2538: // Get the current information in store (remember to appendChild your data to it) nicholas@2538: // pageSpecification is the current page node configuration nicholas@2538: // To create new XML nodes, use storage.document.createElement(); nicholas@2538: }