document.write ( `

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

<header id="logo-container">
    <img src="uploads/alexmurphy1996/create_account_icon.png" align="left" height=23%/>
	<h1> 2. Register, Clone and Edit </h1>
</header>

<section>

	<article>
		<h2>Create Account</h2>
		<p>First off we have to create an account for you to store all your programming wonders. Follow <a href="https://ancientbrain.com/register.php">this link</a> to create an Ancient Brain account. It's just like Facebook... but different.</p>
		<p>You will need to make a login name (to log in, duh), then a Nickname that other people will be able see (be good) and then your email address. You will then be sent an email with your password.</p>
		<div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/signup-page.PNG" width=40% /></br>If this isnt the page you are on you're in the wrong place</div>
		<p>Once you have your password, you should log in and change it to something you will remember (because the password you will get is pure jumbled and you won't remember it... trust me). Follow <a href="https://ancientbrain.com/change.password.php">this link</a> to change your password once logged in.</p>
        </br>
        <p><b>So have you got an account? Great! Let's move on.</b></p>
        </br></br></br>
        
        <h2>Clone & Edit Worlds</h2>
        <p><b>SO</b> to edit code for this course you will need to know how to clone and edit worlds. Clone means copy and Edit means edit &#128522;</p>
        <p><a href="https://ancientbrain.com/world.php?world=9470512367">Click here</a> to be brought to a sample world (for this course all programs will be run inside worlds). We will go through how to change the code and save the world, changing it with pretty much no effort.</p>
        <p>Once on this page, click the <b>Clone</b> button. Then press <b>OK</b> on the pop-up that appears.</p>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Clone-How_to.PNG" width=70% /></div>
        <p>Once you have done this you will be brought to a similar page containing your own, cloned version of the World. Once you are on this page, press the <b>Edit</b> button to bring you to the editor.</p>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Edit-How_to.PNG" width=70% /></div>
        <p>The image above is the editor. From here you will be able to make changes to the world. To do this, simply make changes to the code, press save (or Ctr+S) and then Run (or Alt+ENTER). Only edit the code in the box on top or you could ruin everything &#128557;</p>
        <p>Some examples of changes I made are below.</p>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Editor1.PNG" width=70% /></div></br>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Smiley1.PNG" width=70% /></br>Some changes</div></br></br>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Editor2.PNG" width=70% /></div></br>
        <div style="width:image width px; font-size:80%; text-align:center;"><img src="uploads/alexmurphy1996/Smiley2.PNG" width=70% /></br>Some different changes</div></br>

        <p>Try and make changes to the colour and size of the Smiley Face until you are familiar enough with the editor to continue.</p>
        </br></br>
        
        <center><button class="btn success" onclick="location.href='https://run.ancientbrain.com/run.php?world=0974054854'">Let's play with images and sounds!</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);
        });