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<3) {
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=4095250779';
console.log(clicked);
}
document.write ( `
<style id="css">
</style>
<header>
<img src="uploads/alexmurphy1996/calculations.png" align="left" height=23%/>
<h1> 5. Methods and Calculations </h1>
</header>
<section>
<article>
<h2>JavaScript Methods.</h2>
<p>
JavaScript methods are actions that can be performed on objects. A JavaScript method is a property containing a function definition.
</p>
<p>You can acccess an object method with the following syntax:</p>
<p align="center">
<i>objectName.methodName()</i>
</p>
<p>
Javascript treats primitive values such as strings and numbers as objects when executing methods and properties.</br>
For now, we will only work with string methods.
</p>
<h3>Method Examples</h3>
<p>These are just some of the methods that can be run on strings.</p>
<p>Assume these methods are being run on the variable - var eg = "example".</p>
<table>
<tr>
<th>Method</th>
<th>Description</th>
<th>Returns</th>
</tr>
<tr>
<td>chatAt()</td>
<td>Returns the character at the specified index (position)</td>
<td>eg.charAt(0) = 'e'</td>
</tr>
<tr>
<td>endsWith()</td>
<td>Checks whether a string ends with specified string/characters</td>
<td>eg.endsWith('e') = true</td>
</tr>
<tr>
<td>replace()</td>
<td>Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced</td>
<td>eg.replace('ample', 'press') = 'express'</td>
</tr>
<tr>
<td>slice()</td>
<td>Extracts a part of a string and returns a new string</td>
<td>eg.slice(0, 5) = 'exam'</td>
</tr>
<tr>
<td>split()</td>
<td>Splits a string into an array of substrings. Splits on the parameter given. '' means split between characters.</td>
<td>eg.split('') = ['e', 'x', 'a', 'm', 'p', 'l', 'e']</td>
</tr>
<tr>
<td>toLowerCase()/toUpperCase()</td>
<td>Returns string coverted to all lower/upper case letters</td>
<td>example, EXAMPLE</td>
</tr>
</table>
</br>
<h2>Exercise 5.1</h2>
<center onclick="tbc()">` + AB.launchWorld ( "6850037237", "Word Methods" ) + `</center>
<p> Clone & Edit <a href="https://ancientbrain.com/world.php?world=6850037237" onclick="tbc()">this world</a>. Set the variable output to any of these methods being run on the variable word, which you can set to whatever string you like. You will then see what that method results in. You should try this for each of the methods listed above.
</br></br>
<h2>Calculations</h2>
<p>Doing calculations, or math for short, is very simple. You just write the sum and let the computer do the rest. Here are the symbols you will need to know to do the calculations we need:</p>
<center><p>
+ add </br>
- subtract </br>
* multiply </br>
/ divide </br>
<i>amount = amount + 2</i> is the same as <i>amount += 2</i>
</p></center>
<p>So why dont we try this out. Let's start with something easy.</p>
</br>
<h2>Exercise 5.2</h2>
</br>
<iframe width='710px' height='400px' src="https://run.ancientbrain.com/run.php?world=5462495548"></iframe>
<img src="uploads/alexmurphy1996/howmanyballs.png" width=30% height=45% style="float:right">
</br>
<p>As you can see this is a simple world with some bouncy balls. Your task is to change the amount of balls by changing the amount variable. You can add to it, multiply, subtract or put it to the power of whatever you want. You can clone the world from <a href="https://ancientbrain.com/world.php?world=5462495548" onclick="tbc()">here</a>.</p>
</br>
<h2>Exercise 5.3</h2>
<p>Programming is a lot about problem solving, so here is a small problem for you. You need to convert degrees celcius to farenheit. Add code like this, <i>farenheit = celcius +/-* blah blah or whatever</i> I'm not giving you the answer, see if you can find the maths you need online.</p>
<p><a href="https://ancientbrain.com/world.php?world=2184783374" onclick="tbc()">This </a> is the Celcius to Farenheit World.</p>
</br></br></br>
<center><button class="btn success" onclick="move_on()">If/Else statements are next!</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);
});