AB.restoreData ( function ( clicked ) { clicker(clicked); } );
        
        function clicker(x) {
            clicked = x;
        }
        
        function tbc() {
            if (typeof clicked === 'undefined') {
                clicked = [];
            }
            clicked.push('true');
            console.log(clicked);
        }
        
        function move_on() {
            AB.world.saveData = function () { return clicked; };   
            
            if (typeof clicked === 'undefined' || clicked.length<1) {
                if (typeof clicked === 'undefined') {
                    clicked = [];
                }
                alert_box();
            }
            else {
                dont_continue_lesson();
            }
        }
        
        function alert_box() {
        console.log('alert');
            /*Creating and appending the element */
        
            var element = '<div id="overlay" style="opacity:0"><div id="container">';
            element += "<h1>Have you completed this lesson?</h1><p>It seems that you haven't completed all the tasks, are you sure you want to move on?</p></br></br>";
            element += "<center><button onclick='dont_continue_lesson()' >  Yes  </button>";
            element += "<button onclick='continue_lesson()'>  No  </button></center>";
            element += "</div></div>";
            document.body.innerHTML += (element);
            document.getElementById('overlay').style.display = "block";
        
            var fadeIn = setInterval(function () {
                if (document.getElementById('overlay').style.opacity > 0.98) clearInterval(fadeIn);
                var overlay = document.getElementById('overlay');
                overlay.style.opacity = parseFloat(overlay.style.opacity, 10) + 0.05;
            }, 50);
        };
        
        function continue_lesson() {
            document.getElementById("overlay").outerHTML = "";
        }
        
        function dont_continue_lesson() {
            AB.saveData ( clicked );
            window.location.href = "https://run.ancientbrain.com/run.php?world=2332554773";
            console.log(clicked);
        }
        



document.write ( `

<style id="css">
</style>

<header>
    <img src="uploads/alexmurphy1996/uploads_icon.png" align="left" height=23%/>
	<h1> 3. Upload Music and Images </h1>
</header>

<section>

	<article>
	
	    <h2>Uploads</h2>
        <p>In order to upload images or sounds go to <b>My Uploads</b> under the <b>User</b> tab in the Navigation bar at the top of the page.</p></br>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Uploads.PNG" width=70% /></div></br>
        <p>First off, you should download whatever images or sound files that you want to upload.</p>
        </br>
        <ul>
            <li>You can download images easily <a href="https://www.freeiconspng.com/popular-png-images.html">here.</a></li></br>
            <li>There are some good sound files <a href="http://soundbible.com/free-sound-effects-1.html">here.</a></li>
        </ul>
        </br>
        <p>Once on the uploads section, press the <b>Choose File</b> button, which will open up a window with the files on your computer (probably in Downloads if you just downloaded them). Then find and select the file you want to upload and click Open. The file will now be uploaded.</p>
        <p>Everything you upload will be listed below on the same page.</p>
        <p>The way to access your uploads always follows the following pattern:</p>
        <div style="width:image font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/UploadsDiagram.png" /></div>
        </br>
        <p>Loading images is pretty much the same except we use <b>loadImage()</b> instead of loadSound().</p>
        </br></br>
        
        <h2>Task</h2>
        <img src="uploads/alexmurphy1996/UseBlankBackgrounds.png" width=40% align="right"/>
        <p>So let's give it a go! Just click the link below the window to go to the world page.</p>
        <p>Have a look at this World:</p>
        <div align="center" onclick="tbc()">` + AB.launchWorld ( "8428713644", "Trampoline World" ) + `</div>
        
        <p float="left">As you can see, spiderman and charmander are jumping on a trampoline while the 'bouncy bouncy' sound plays on repeat.</p>
        <p>Using the information you learned above, upload your own images and sound, and replace the ones in the world.</p>
        </br></br></br>
        <center><button class="btn success" onclick="move_on()">Now let's get into some real coding...</button><center>

	</article>
	
		<nav id="nav">	</nav>

</section>

` );



    	$.getScript("/uploads/alexmurphy1996/navigation.js",  function()
        {
            $("#nav").html(thehtml);
        });
        
        $.getScript("/uploads/alexmurphy1996/css.js",  function()
        {
            $("#css").html(the_css);
        });