Code viewer [Ancient Brain]

Code viewer for World: 7. For/While Loops

        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<4) {
                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=7280798465';
            console.log(clicked);
        }
        
     
        function changeImage() {
            document.getElementById("imgClickAndChange").src = "uploads/alexmurphy1996/forloophelp.png";
        }
        function changeImage2() {
            document.getElementById("imgClickAndChange2").src = "uploads/alexmurphy1996/forwhilehelp.png";
        }
    


document.write ( `

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

<header>
    <img src="uploads/alexmurphy1996/loop_icon.png" align="left" height=20%/>
	<h1> 7. For/While Loops </h1>
</header>

<section>

	<article>
	    <p>Now it's time to learn about loops.</p>
	    <p>Loops are used when you want to do the same action over and over a certain amount of times. Like, for example, while enemy still has health, keep attacking, or for each item on a list, buy the item.</p>
	    <p>There are two types of loops - While loops & For loops. They are quite similar and work in the same way, as you can see from the diagrams below.</p>
	    </br></br>
	    
	    <img src="uploads/alexmurphy1996/ForloopDiagram.png" />
	    <img src="uploads/alexmurphy1996/WhileloopDiagram.png" align="right"/>
	    </br></br>
	    
	    <p>These loops may look scary, but all they are is you telling the computer to make a counter, do something, add to the counter, and repeat util you've done it all the times you want.</p>
	    </br>
	    
	    <h3>Lets give it a go...</h3>
	    <p>In the world you are about to edit, Bart Simpson has somehow ended up on fire... </p>
        <center onclick="tbc()">` + AB.launchWorld ( "6494533318", "Bart on fire" ) + `</center>
        <p align="right">...your job is to use a <i>while loop</i> to make him run around to put the fire out.</p></br>
	    <p>Clone this world and in the space provided add the following code - </br></p>
	    <p align="left"></br><b><i>while (onFire) { </br>
	    &nbsp &nbsp run(); </br>
	    }</i></b></p>
	    </br></br>
	    <h2>Exercise 7.1</h2>
	    <p>Good job! Now were going to use loops to add multiple images and drawings to some worlds. This should help give you a good understanding of how loops work.</p>
	    <p>First lets use another while loop to add some Spongebobs running accross the screen of <a href="https://ancientbrain.com/world.php?world=6037727278" onclick="tbc()">this world.</a> Use <i>fullwidth</i> as your limit for i. Use draw_image(i) to place the images - i being the x position or the position across the screen.</p>
	    </br><center><i>Tip - You can add fullwidth or fullheight divided by whatever amount you like to fit that amount of images in.</i></center>
	    </br>
	    <p>Once you have that done, we will move on to for loops.</p>
	    </br></br>
	    <img src="uploads/alexmurphy1996/stuck.png" id="imgClickAndChange" onclick="changeImage()" width=35% align="right"/>
	    <h2>Exercise 7.2</h2>
	    <p> Let's use a for loop to add some bombs going down the screen to an explosion in <a href="https://ancientbrain.com/world.php?world=9868692867" onclick="tbc()">this world.</a> Use draw_image(i) to place the images - i being the y position or the position down the screen. </p>
	    </br></br>
	    <i>Tip - fullheight is the bottom of the screen whereas 0 is the top. As you increase your value for i you move down the screen.</i>
	    </br></br></br></br>
	    <h2>Exercise 7.3</h2>
	    <p>Now let's use a combination of a while and for loops to fill a world top to bottom and all the way across, with smiley faces.</p>
	    <img src="uploads/alexmurphy1996/clickme2.png" id="imgClickAndChange2" onclick="changeImage2()" width=35% align="right"/>
	    <ul>
	        <li>Use happyFace(x, y, size) - x is the x position, y is the y position and size is the size which you choose.</li>
	        <li>Use a for loop to add faces across the screen.</li>
	        <li>Within this for loop add a while loop to add faces down the screen for every x value.</li>
	        <li>happyFaces() should only be called once in your code.</li>
	    </ul>
	    <p><a href="https://ancientbrain.com/world.php?world=3892840931" onclick="tbc()">This</a> is the smiley face world you are to edit.</p>
	    <p>Are you only seeing half smiley faces around the edges? This is because of where you start drawing them. Try change your starting x and y positions so all the smiley faces fit in the world properly.</p>
	    
	    </br></br></br>
	    <center><button class="btn success" onclick="move_on()">Let's finish the course!</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);
        });