Embedding a Virtual Lab in Moodle

Add or edit an existing section or HTML block and once you see the Rich Text editor, look for the down arrow in the toolbar, and click that to expand the options in the toolbar.



Then you'll see the icon </> which when you click that, it will switch to the HTML editor view. You will copy the HTML/Javascript snippet below and edit the values to reflect the project you want to launch.

Here is the snippet to add in the HTML editor shown above. Be sure to replace the project name and token with your project's name and token.

Get your project name and token from within the "Projects" screen in the Appsembler Virtual Labs interface.

Copy and paste the following into your Moodle site after you've replaced the project name and token with your project's name and token.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="wharf">
   <iframe src="https://staging-avl.appsembler.com/isc/newdeploy/" style="visibility: hidden" width="0" height="0"></iframe>
   <p>When you click the button below, a new REPLACE-THIS-WITH-PROJECT-FRIENDLY-NAME site will be started for you.</p>
   <input type="button" value="Launch REPLACE-THIS-WITH-PROJECT-FRIENDLY-NAME site" style="margin-bottom: 20px;">
</div>
<script>
(function() {
    var $wharf = $('#wharf'),
        $launch_button = $wharf.find('input');
    $launch_button.click(function() {
        $launch_button.attr('disabled', 'disabled').val('Launching...');
        var user_id = $('div.logininfo a').attr('href').split('id=')[1];
        $wharf.find('iframe')[0].contentWindow.postMessage({
            owner_email: user_id + "@moodle_id.appsembler",
            project: "REPLACE-THIS-WITH-YOUR-PROJECTS-NAME",
            token: "REPLACE-THIS-WITH-YOUR-PROJECTS-TOKEN"
        }, "https://staging\u002Davl.appsembler.com");
        return false;
    });
    window.addEventListener("message", function(event) {
        if (event.origin !== 'https://staging\u002Davl.appsembler.com') return;
        if (event.data.status === 'siteDeployed') {
            $wharf.html(event.data.html_content);
        } else if (event.data.status === 'deploymentError') {
            $wharf.text(event.data.error_message);
        }
    }, false);
})();
</script>

You need to turn editing off before trying out the launch button. Click the orange "Turn editing off" button.

Now you can click the "Launch Tomcat site" button to launch the lab environment. 

After you click the button, you will see the button change to "Launching..."

And after a few seconds, you should see the launch URL and any other information that you're displaying to the learner:

Related Articles