nicholas@3045: /** nicholas@3045: * WAET Blank Template nicholas@3045: * Use this to start building your custom interface nicholas@3045: */ n@3095: /*globals window, interfaceContext, testState, Interface, audioEngineContext, console, document, specification, $, storage*/ nickjillings@1345: // Once this is loaded and parsed, begin execution nickjillings@1345: loadInterface(); nickjillings@1345: nickjillings@1345: 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@2538: // 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: nicholas@2538: // 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: nicholas@2538: // Set title to that defined in XML, else set to default nicholas@2699: 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: nicholas@2538: var pagetitle = document.createElement('div'); nicholas@2538: pagetitle.className = "pageTitle"; nicholas@2538: pagetitle.align = "center"; nicholas@2699: nicholas@2699: 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@1345: var time = audioEngineContext.timer.getTestTime(); nickjillings@1345: console.log('Stopped at ' + time); // DEBUG/SAFETY nicholas@2538: } nicholas@2538: }; nicholas@2538: // Create Submit (save) button nicholas@2538: var submit = document.createElement("button"); nicholas@2538: submit.innerHTML = 'Next'; nicholas@2538: submit.onclick = buttonSubmitClick; nicholas@2538: submit.id = 'submit-button'; nicholas@2538: submit.style.float = 'left'; n@3007: n@3007: // Create the sort button n@3007: var sort = document.createElement("button"); n@3007: sort.id = "sort-fragments"; n@3007: sort.textContent = "Sort"; n@3007: sort.style.display = "inline-block"; n@3007: sort.style.visibility = "hidden"; n@3007: sort.onclick = buttonSortFragmentClick; n@3007: nicholas@2538: // Append the interface buttons into the interfaceButtons object. nicholas@2538: interfaceButtons.appendChild(playback); nicholas@2538: interfaceButtons.appendChild(submit); n@3007: interfaceButtons.appendChild(sort); nicholas@2538: nicholas@3045: nicholas@3045: // Create outside reference holder nicholas@3045: var outsideRef = document.createElement("div"); nicholas@3045: outsideRef.id = "outside-reference-holder"; nicholas@3045: nicholas@3045: // Create a holder for the slider rows nicholas@3045: var sliderBox = document.createElement("div"); nicholas@3045: sliderBox.id = 'slider-box'; nicholas@3045: var sliderGrid = document.createElement("div"); nicholas@3045: sliderGrid.id = "slider-grid"; nicholas@3045: sliderBox.appendChild(sliderGrid); nicholas@2538: var scaleText = document.createElement('div'); nicholas@2538: scaleText.id = "scale-text-holder"; nicholas@3045: sliderGrid.appendChild(scaleText); nicholas@3045: 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: testContent.style.zIndex = 1; nicholas@2538: interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema 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@2396: testContent.appendChild(outsideRef); nicholas@2538: testContent.appendChild(sliderBox); nicholas@2538: testContent.appendChild(feedbackHolder); nicholas@2538: interfaceContext.insertPoint.appendChild(testContent); nickjillings@1345: nicholas@2538: // Load the full interface nicholas@2538: testState.initialise(); nicholas@2538: testState.advanceState(); n@3095: } nickjillings@1345: 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@2538: nicholas@2538: var feedbackHolder = document.getElementById('feedbackHolder'); nicholas@3045: var sliderBox = document.getElementById('slider-box'); nicholas@3045: var sliderGrid = document.getElementById("slider-grid"); nicholas@3045: var scaleTextHolder = document.getElementById("scale-text-holder"); nicholas@3045: var interfaceObj = interfaceContext.getCombinedInterfaces(page); nicholas@3045: var commentBoxPrefix = "Comment on track"; nicholas@3045: var loopPlayback = page.loop; nicholas@2381: feedbackHolder.innerHTML = ""; nicholas@3045: 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@2470: // Set the page title nicholas@2470: if (typeof page.title == "string" && page.title.length > 0) { nicholas@2699: document.getElementById("test-title").textContent = page.title; nicholas@2470: } nicholas@3045: // Set the axis title nicholas@2699: if (interfaceObj.title !== null) { nicholas@2538: document.getElementById("pageTitle").textContent = interfaceObj.title; nicholas@2538: } nicholas@2538: nicholas@2801: if (interfaceObj.image !== undefined || page.audioElements.some(function (elem) { n@2793: return elem.image !== undefined; n@2793: })) { nicholas@2781: document.getElementById("testContent").insertBefore(interfaceContext.imageHolder.root, document.getElementById("slider")); nicholas@2781: interfaceContext.imageHolder.setImage(interfaceObj.image); nicholas@2781: } nicholas@2781: nicholas@2538: // Delete outside reference nicholas@2396: document.getElementById("outside-reference-holder").innerHTML = ""; nicholas@2538: nicholas@3045: // Get the comment box prefix nicholas@2699: if (interfaceObj.commentBoxPrefix !== undefined) { nicholas@2538: commentBoxPrefix = interfaceObj.commentBoxPrefix; nicholas@2538: } nicholas@2538: nicholas@3045: // Populate the comment questions nicholas@3045: $(page.commentQuestions).each(function (index, element) { nicholas@3045: var node = interfaceContext.createCommentQuestion(element); nicholas@3045: feedbackHolder.appendChild(node.holder); nicholas@3045: }); nicholas@3045: nicholas@3045: // Configure the grid nicholas@3045: var numRows = page.audioElements.filter(function (a) { nicholas@3045: return (a.type !== "outside-reference"); nicholas@3045: }).length; nicholas@3045: var numColumns = page.interfaces[0].scales.length; nicholas@3045: sliderGrid.style.gridTemplateRows = "50px repeat(" + numRows + ", 72px)"; nicholas@3045: scaleTextHolder.style.gridTemplateColumns = "100px repeat(" + numColumns + ", 1fr) 100px"; nicholas@3045: page.interfaces[0].scales.sort(function (a, b) { nicholas@3045: if (a.position > b.position) { nicholas@3045: return 1; nicholas@3045: } else if (a.position < b.position) { nicholas@3045: return -1; nicholas@3045: } nicholas@3045: return 0; nicholas@3045: }).forEach(function (a, i) { nicholas@3045: var h = document.createElement("div"); nicholas@3045: var text = document.createElement("span"); nicholas@3045: h.className = "scale-text"; nicholas@3045: h.style.gridColumn = String(i + 2) + "/" + String(i + 3); nicholas@3045: text.textContent = a.text; nicholas@3045: h.appendChild(text); nicholas@3045: scaleTextHolder.appendChild(h); n@3095: }); nicholas@3045: nicholas@3045: // Find all the audioElements from the audioHolder nicholas@3045: var index = 0; nicholas@3045: var labelType = page.label; nicholas@3045: if (labelType == "default") { nicholas@3045: labelType = "number"; nicholas@3045: } nicholas@3045: $(page.audioElements).each(function (pageIndex, element) { nicholas@3045: // Find URL of track nicholas@3045: // In this jQuery loop, variable 'this' holds the current audioElement. nicholas@3045: nicholas@3045: var audioObject = audioEngineContext.newTrack(element); nicholas@3045: if (element.type == 'outside-reference') { nicholas@3045: // Construct outside reference; nicholas@3045: var orNode = new interfaceContext.outsideReferenceDOM(audioObject, index, document.getElementById("outside-reference-holder")); nicholas@3045: audioObject.bindInterface(orNode); nicholas@3045: } else { nicholas@3045: // Create a slider per track me@3141: console.log('in discrete') me@3141: if (this.label == ""){ me@3141: var label = interfaceContext.getLabel(labelType, index, page.labelStart); me@3141: index += 1; me@3141: } me@3141: else { me@3141: var label = this.label me@3141: } nicholas@3045: var sliderObj = new discreteObject(audioObject, label); nicholas@3045: sliderGrid.appendChild(sliderObj.DOMRoot); nicholas@3045: audioObject.bindInterface(sliderObj); nicholas@3045: interfaceContext.commentBoxes.createCommentBox(audioObject); nicholas@3045: } nicholas@3045: nicholas@3045: }); nicholas@2699: interfaceObj.options.forEach(function (option) { nicholas@2538: if (option.type == "show") { nicholas@2538: switch (option.name) { n@2407: case "playhead": n@2407: var playbackHolder = document.getElementById('playback-holder'); nicholas@2699: if (playbackHolder === null) { n@2407: playbackHolder = document.createElement('div'); n@2407: playbackHolder.style.width = "100%"; n@2407: playbackHolder.align = 'center'; n@2407: playbackHolder.appendChild(interfaceContext.playhead.object); n@2407: feedbackHolder.appendChild(playbackHolder); n@2407: } n@2407: break; n@2407: case "page-count": n@2407: var pagecountHolder = document.getElementById('page-count'); nicholas@2699: if (pagecountHolder === null) { n@2407: pagecountHolder = document.createElement('div'); n@2407: pagecountHolder.id = 'page-count'; n@2407: } nicholas@2538: pagecountHolder.innerHTML = 'Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + ''; n@2407: var inject = document.getElementById('interface-buttons'); n@2407: inject.appendChild(pagecountHolder); n@2407: break; n@2407: case "volume": nicholas@2699: if (document.getElementById('master-volume-holder') === null) { n@2407: feedbackHolder.appendChild(interfaceContext.volume.object); n@2407: } n@2407: break; n@2407: case "comments": nicholas@2538: interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); n@2407: break; n@3007: case "fragmentSort": n@3007: var button = document.getElementById('sort-fragments'); n@3007: button.style.visibility = "visible"; n@3007: break; n@2407: } n@2407: } nicholas@2699: }); nicholas@2538: // Auto-align nicholas@2538: resizeWindow(null); nickjillings@1345: } nickjillings@1345: nicholas@3045: function discreteObject(audioObject, label) { nicholas@2538: // An example node, you can make this however you want for each audioElement. nicholas@2538: // However, every audioObject (audioEngineContext.audioObject) MUST have an interface object with the following nicholas@2538: // You attach them by calling audioObject.bindInterface( ) nicholas@3045: var playing = false; nicholas@2538: nicholas@3045: function buttonClicked(event) { nicholas@3045: if (!playing) { nicholas@3045: audioEngineContext.play(audioObject.id); nicholas@3045: } else { nicholas@3045: audioEngineContext.stop(); nicholas@2699: } n@3095: } nicholas@3045: nicholas@3045: function radioSelected(event) { nicholas@3045: var time = audioEngineContext.timer.getTestTime(); nicholas@3045: audioObject.metric.moved(time, event.currentTarget.value); nicholas@3045: console.log("slider " + audioObject.id + " moved to " + event.currentTarget.value + "(" + time + ")"); n@3095: } nicholas@3045: nicholas@3045: var root = document.createElement("div"), nicholas@3045: labelHolder = document.createElement("div"), nicholas@3045: button = document.createElement("button"); nicholas@3045: root.className = "discrete-row"; nicholas@3045: labelHolder.className = "discrete-label"; nicholas@3045: button.className = "discrete-button"; nicholas@3045: root.appendChild(labelHolder); nicholas@3045: nicholas@3045: var labelSpan = document.createElement("span"); nicholas@3045: labelHolder.appendChild(labelSpan); nicholas@3045: labelSpan.textContent = label; nicholas@3045: button.textContent = "Listen"; nicholas@3045: button.disabled = "true"; nicholas@3045: button.addEventListener("click", this); nicholas@3045: nicholas@3045: var numScales = audioObject.specification.parent.interfaces[0].scales.length; nicholas@3045: root.style.gridTemplateColumns = "100px repeat(" + numScales + ", 1fr) 100px"; nicholas@3045: for (var n = 0; n < numScales; n++) { nicholas@3045: var input = document.createElement("input"); nicholas@3045: input.type = "radio"; nicholas@3045: input.disabled = "true"; nicholas@3045: input.value = n / (numScales - 1); nicholas@3045: input.addEventListener("click", this); nicholas@3045: input.name = audioObject.specification.id; nicholas@3045: root.appendChild(input); nicholas@2538: } nicholas@3045: root.appendChild(button); nicholas@3045: this.handleEvent = function (event) { nicholas@3045: if (event.currentTarget === button) { nicholas@3045: buttonClicked(event); nicholas@3045: } else if (event.currentTarget.type === "radio") { nicholas@3045: radioSelected(event); nicholas@2538: } n@3095: }; nicholas@2538: this.enable = function () { nicholas@2538: // This is used to tell the interface object that playback of this node is ready nicholas@3045: button.disabled = ""; nicholas@3045: var a = root.querySelectorAll("input[type=\"radio\"]"); nicholas@3045: for (var n = 0; n < a.length; n++) { nicholas@3045: a[n].disabled = false; nicholas@3045: } nicholas@3045: button.textContent = "Listen"; nicholas@2538: }; nicholas@2538: this.updateLoading = function (progress) { nicholas@2538: // progress is a value from 0 to 100 indicating the current download state of media files nicholas@3045: button.textContent = progress + "%"; nicholas@2538: }; nicholas@2538: this.startPlayback = function () { nicholas@3045: // Called when playback has begun nicholas@3045: playing = true; nicholas@3045: $(root).addClass("discrete-row-playing"); nicholas@3045: button.textContent = "Stop"; nicholas@2699: }; nicholas@2538: this.stopPlayback = function () { nicholas@3045: // Called when playback has stopped. This gets called even if playback never started! nicholas@3045: playing = false; nicholas@3045: $(root).removeClass("discrete-row-playing"); nicholas@3045: button.textContent = "Listen"; nicholas@3045: }; nicholas@3045: this.getValue = function () { nicholas@3045: // Return the current value of the object. If there is no value, return 0 nicholas@3045: var a = root.querySelectorAll("input[type=\"radio\"]"); nicholas@3045: for (var n = 0; n < a.length; n++) { nicholas@3045: if (a[n].checked) { nicholas@3045: return Number(a[n].value); n@2793: } n@2428: } nicholas@3045: return -1; nicholas@2538: }; nicholas@2538: this.getPresentedId = function () { nicholas@2538: // Return the presented ID of the object. For instance, the APE has sliders starting from 0. Whilst AB has alphabetical scale nicholas@3045: return label; nicholas@2538: }; nicholas@2538: this.canMove = function () { nicholas@2538: // Return either true or false if the interface object can be moved. AB / Reference cannot, whilst sliders can and therefore have a continuous scale. nicholas@2538: // These are checked primarily if the interface check option 'fragmentMoved' is enabled. nicholas@2538: return true; nicholas@2538: }; nicholas@2538: this.exportXMLDOM = function (audioObject) { nicholas@2538: // Called by the audioObject holding this element to export the interface node. nicholas@2538: // If there is no value node (such as outside reference), return null nicholas@2538: // 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 nicholas@2538: // Use storage.document.createElement('value'); to generate the XML node. nicholas@2538: var node = storage.document.createElement('value'); nicholas@2538: node.textContent = this.getValue(); nicholas@2538: return node; nicholas@3045: nicholas@2538: }; nicholas@2538: this.error = function () { nicholas@3045: // If there is an error with the audioObject, this will be called to indicate a failure nicholas@2699: }; nicholas@3045: Object.defineProperties(this, { nicholas@3045: "DOMRoot": { nicholas@3045: "value": root nicholas@3045: } nicholas@3045: }); n@3095: } nickjillings@1345: nicholas@2538: function resizeWindow(event) { nicholas@2538: // Called on every window resize event, use this to scale your page properly nickjillings@1345: } nickjillings@1345: nicholas@3045: function buttonSortFragmentClick() { nicholas@3045: var sortIndex = interfaceContext.sortFragmentsByScore(); nicholas@3045: var sliderBox = document.getElementById("slider-holder"); nicholas@3045: var nodes = audioEngineContext.audioObjects.filter(function (ao) { nicholas@3045: return ao.specification.type !== "outside-reference"; nicholas@3040: }); nicholas@3045: var i; nicholas@3045: nodes.forEach(function (ao) { nicholas@3045: sliderBox.removeChild(ao.interfaceDOM.holder); nicholas@3045: }); nicholas@3045: for (i = 0; i < nodes.length; i++) { nicholas@3045: var j = sortIndex[i]; nicholas@3045: sliderBox.appendChild(nodes[j].interfaceDOM.holder); nicholas@3040: } nickjillings@1345: } nickjillings@1345: nickjillings@1345: function buttonSubmitClick() // TODO: Only when all songs have been played! nickjillings@1345: { nicholas@2651: var checks = testState.currentStateMap.interfaces[0].options, nicholas@2651: canContinue = true; nickjillings@1345: nicholas@2538: // Check that the anchor and reference objects are correctly placed nicholas@2699: if (interfaceContext.checkHiddenAnchor() === false) { nicholas@2538: return; nicholas@2538: } nicholas@2699: if (interfaceContext.checkHiddenReference() === false) { nicholas@2538: return; nicholas@2538: } nicholas@2825: if (interfaceContext.checkFragmentMinPlays() === false) { nicholas@2825: return; nicholas@2825: } nicholas@3035: if (interfaceContext.checkCommentQuestions() === false) { nicholas@3035: return; nicholas@3035: } nicholas@2538: nicholas@2538: for (var i = 0; i < checks.length; i++) { nicholas@3045: 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@2538: break; nicholas@2538: case 'fragmentFullPlayback': nicholas@2538: // Check all fragments have been played to their full length n@2790: checkState = interfaceContext.checkAllPlayed(checks[i].errorMessage); nicholas@2538: console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); 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. n@2790: checkState = interfaceContext.checkAllCommented(checks[i].errorMessage); nicholas@2538: break; nicholas@2538: case 'scalerange': nicholas@2538: // Check the scale has been used effectively n@2790: checkState = interfaceContext.checkScaleRange(checks[i].errorMessage); nicholas@3045: 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@3045: if (checkState === false) { nicholas@3045: canContinue = false; nicholas@2538: break; nicholas@2538: } nicholas@2538: } nicholas@2538: nickjillings@1345: 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 { nicholas@2699: if (audioEngineContext.timer.testStarted === false) { nicholas@2538: interfaceContext.lightbox.post("Warning", 'You have not started the test! Please press start to begin the test!'); nicholas@2538: return; nicholas@2538: } nicholas@2538: } nicholas@2538: testState.advanceState(); nicholas@2538: } nickjillings@1345: } nickjillings@1345: 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: }