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>
    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);
});