Reply To: html code with embedded script

[Jeremy]

Hi,

Yes, it’s possible, I actually implemented an earlier version of this script before myself

Since you said you’re clueless when it comes to javascript, I don’t know how much of the script below you’ll understand, but it is a full, functional script:

PennController.ResetPrefix(null)

// The Farm's jQuery library is outdated, we need to polyfill a couple methods
jQuery.prototype.on = function(...args) { return jQuery.prototype.bind.apply(this, args); }
jQuery.prototype.prop = function(...args) { return jQuery.prototype.attr.apply(this, args); }
// Let's dynamically load the HeadphoneCheck script
var HeadphoneCheckScriptTag = document.createElement("script");
HeadphoneCheckScriptTag.src = "https://s3.amazonaws.com/mcd-headphone-check/v1.0/src/HeadphoneCheck.min.js";
document.head.appendChild( HeadphoneCheckScriptTag );

newTrial(
    newButton("check", "Start Heaphone Check")
        .print()
    ,
    // This Canvas will contain the test itself
    newCanvas("headphonecheck", 500,500)
        .print()
    ,
    // The HeadphoneCheck module fills the element whose id is "hc-container"
    newFunction( () => getCanvas("headphonecheck")._element.jQueryElement.attr("id", "hc-container") ).call()
    ,
    getButton("check")
        .wait()
        .remove()
    ,
    // Create this Text element, but don't print it just yet
    newText("failure", "Sorry, you failed the heaphone check")
    ,
    // This is where it all happens
    newFunction( () => {
        $(document).on('hcHeadphoneCheckEnd', function(event, data) {
            getCanvas("headphonecheck").remove()._runPromises();
            if (data.didPass) getButton("dummy").click()._runPromises();
            else getText("failure").print()._runPromises()
        });
        HeadphoneCheck.runHeadphoneCheck() 
    }).call()
    ,
    // This is an invisible button that's clicked in the function above upon success
    newButton("dummy").wait()
)

Jeremy