stormsweeper/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Exercises With Arrays And For Loops</title>
    </head>
    <body>
        <h1>Exercises With Arrays And For Loops</h1>
        <div id="exercise01" class="exercise">
            <h3>Exercise #01</h3>
            <div class="answer">
            </div>
        </div>
        <div id="exercise02" class="exercise">
            <h3>Exercise #02</h3>
            <div class="answer">
            </div>
        </div>
        <div id="exercise03" class="exercise">
            <h3>Exercise #03</h3>
            <div class="answer">
            </div>
        </div>
        <div id="exercise04" class="exercise">
            <h3>Exercise #04</h3>
            <div class="answer">
            </div>
        </div>
        <div id="exercise05" class="exercise">
            <h3>Exercise #05</h3>
            <div class="answer">
            </div>
        </div>
        <div id="exercise06" class="exercise">
            <h3>Exercise #06</h3>
            <div class="answer">
            </div>
        </div>
        <div id="exercise07" class="exercise">
            <h3>Exercise #07</h3>
            <div class="answer">
            </div>
            <div class="output" id="output07">
            </div>
        </div>
        <div id="exercise08" class="exercise">
            <h3>Exercise #08</h3>
            <div class="answer">
            </div>
            <div class="output" id="output08">
            </div>
        </div>
        <div id="exercise09" class="exercise">
            <h3>Exercise #09</h3>
            <div class="answer">
            </div>
            <div class="output" id="output09">
            </div>
        </div>
        <div id="exercise10" class="exercise">
            <h3>Exercise #10</h3>
            <div class="answer">
            </div>
            <div class="output" id="output10">
            </div>
        </div>
        <div id="exercise11" class="exercise">
            <h3>Exercise #11</h3>
            <div class="answer">
            </div>
            <div class="output" id="output11">
            </div>
        </div>
        <div id="exercise12" class="exercise">
            <h3>Exercise #12 (BONUS)</h3>
            <div class="answer">
            </div>
        </div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.html","editor.css","console"]}

## script.js
/*
    Exercise #1: An empty array
    In the function below, set the value of 'arr1' to be an empty array.
 */
function exercise01() {
    var arr1;
    return arr1;
}

/*
    Exercise #2: A not-empty array
    In the function below, set the value of 'arr2' to be an array with 3 elements.
 */
function exercise02() {
    var arr2;
    return arr2;
}

/*
    Exercise #3: The length of an array
    In the function below, set the value of 'length' to be the length of arr3.
 */
function exercise03(arr3) {
    var length;
    return length;
}

/*
    Exercise #4: Comparing array lengths
    In the function below, set the value of 'aEqualsB' to true if the length of
    a is equal to the length of b.
 */
function exercise04(a, b) {
    var aEqualsB;
    return aEqualsB;
}

/*
    Exercise #5: Comparing array lengths again
    In the function below, set the value of 'aGreaterThanB' to true if the length of
    a is greater than the length of b.
 */
function exercise05(a, b) {
    var aGreaterThanB;
    return aGreaterThanB;
}

/*
    Exercise #6: Adding to an array
    In the function below, add your name to the end of arr6.
 */
function exercise06(arr6) {
    // your code here
}

/*
    Exercise #7: For loops - counting up
    In the function below, create a for loop that runs from 0 to 5, appending
    that number to the div with the id 'output07'.
 */
function exercise07() {
    // your code here
}

/*
    Exercise #8: For loops - counting down
    In the function below, create a for loop that counts from 10 to 1, appending
    that number to the div with the id 'output08'.
 */
function exercise08() {
    // your code here
}

/*
    Exercise #9: For loops - only even numbers
    In the function below, create a for loop that counts from 1 to 20, appending
    only the even numbers to the div with the id 'output09'.
 */
function exercise09() {
    // your code here
}

/*
    Exercise #10: For loops - with an array
    In the function below, create a for loop that appends each element in 'arr10'
    to the div with the id 'output10'. The output will be a greeting.
 */
function exercise10(arr10) {
    // your code here
}

/*
    Exercise #11: For loops - One loop, two arrays
    In the function below, create a for loop that appends each element in 'arrA'
    and 'arrB' to the div with the id 'output11'. The output will be a secret message.

    Example: if arrA is ["H", "l", "o"] and arrB is ["e", "l", "!"], the final
    output would be "Hello!"

    Note: 'arrA' and 'arrB' are the same length
 */
function exercise11(arrA, arrB) {
    // your code here
}

/*
    BONUS Exercise #12: For loops - One loop, two arrays
    In the function below, create a for loop that adds elements in 'arrA'
    to 'arrB' if they are greater than 5.

    Example: if arrA is [1, 3, 5, 7, 9], you should add 7 and 9 to arrB
 */
function exercise12(arrA, arrB) {
    // your code here
}

function updateAnswer(exerciseId, html, isIncorrect) {
    var answerDiv = $(exerciseId).find(".answer").html(html).removeClass("incorrect");
    if (isIncorrect) {
        answerDiv.addClass("incorrect");
    }
}

var output01 = exercise01();
if (Array.isArray(output01)) {
    if (output01.length === 0) {
        updateAnswer("#exercise01", "Correct!", false);
    } else {
        updateAnswer("#exercise01", "Incorrect! Your array should not have any elements.", true);
    }
} else if (typeof output01 === "undefined") {
    updateAnswer("#exercise01", "<em>Set the value of the variable 'arr' to an empty array.</em>", false);
} else {
    updateAnswer("#exercise01", "Incorrect! The variable 'arr1' is not an array.", true);
}

var output02 = exercise02();
if (Array.isArray(output02)) {
    if (output02.length === 3) {
        updateAnswer("#exercise02", "Correct!", false);
    } else {
        updateAnswer("#exercise02", "Incorrect! Your array should have exactly 3 elements.", true);
    }
} else if (typeof output02 === "undefined") {
    updateAnswer("#exercise02", "<em>Set the value of the variable 'arr2' to an empty array.</em>", false);
} else {
    updateAnswer("#exercise02", "Incorrect! The variable 'arr2' is not an array.", true);
}

(function(){
    var inputs = [8,6,7];
    var output;
    for (var i = 0; i < inputs.length; i++) {
        output = exercise03(new Array(inputs[i]));
        if (typeof output === "undefined") {
            updateAnswer("#exercise03", "<em>Set the value of the variable 'length' to the length of 'arr3'.</em>", false);
            return;
        } else if (output !== inputs[i]) {
            updateAnswer("#exercise03", "Incorrect! Set the value of the variable 'length' to the length of 'arr3'.", true);
            return;
        }
    }
    updateAnswer("#exercise03", "Correct!", false);
})();

(function(){
    var inputs = [[5,3], [0,9], [0,0]];
    var expected = [false, false, true];
    var output;
    for (var i = 0; i < inputs.length; i++) {
        output = exercise04(new Array(inputs[i][0]), new Array(inputs[i][1]));
        if (typeof output === "undefined") {
            updateAnswer("#exercise04", "<em>Set the value of the variable 'aEqualsB' to true if the length of 'a' is equal to 'b'.</em>", false);
            return;
        } else if (output !== expected[i]) {
            updateAnswer("#exercise04", "Incorrect! Set the value of the variable 'aEqualsB' to true if the length of 'a' is equal to 'b'.", true);
            return;
        }
    }
    updateAnswer("#exercise04", "Correct!", false);
})();

(function(){
    var inputs = [[5,3], [0,9], [0,0]];
    var expected = [true, false, false];
    var output;
    for (var i = 0; i < inputs.length; i++) {
        output = exercise05(new Array(inputs[i][0]), new Array(inputs[i][1]));
        if (typeof output === "undefined") {
            updateAnswer("#exercise05", "<em>Set the value of the variable 'aGreaterThanB' to true if the length of 'a' is greater than 'b'.</em>", false);
            return;
        } else if (output !== expected[i]) {
            updateAnswer("#exercise05", "Incorrect! Set the value of the variable 'aGreaterThanB' to true if the length of 'a' is greater than 'b'.", true);
            return;
        }
    }
    updateAnswer("#exercise05", "Correct!", false);
})();

var output6 = ["Hello123"];
exercise06(output6);
if (!Array.isArray(output6) || output6.length < 1 || output6[0] !== "Hello123") {
    updateAnswer("#exercise06", "Incorrect! You should add your name to the end of the array.", true);
} else if (output6.length < 2) {
    updateAnswer("#exercise06", "<em>Add your name to the end of 'arr6'.", false);
} else {
    updateAnswer("#exercise06", "Correct!", false);
}

exercise07();
var output07 = $("#output07").text().trim();
if (output07 === "012345") {
    updateAnswer("#exercise07", "Correct!", false);
} else if (output07 === "") {
    updateAnswer("#exercise07", "<em>Use a for loop to count up from 0 to 5, putting the numbers in the div below</em>", false);
} else {
    updateAnswer("#exercise07", "Incorrect! The output below should just be the numbers 0 through 5", true);
}

exercise08();
var output08 = $("#output08").text().trim();
if (output08 === "10987654321") {
    updateAnswer("#exercise08", "Correct!", false);
} else if (output07 === "") {
    updateAnswer("#exercise08", "<em>Use a for loop to count down from 10 to 1, putting the numbers in the div below</em>", false);
} else {
    updateAnswer("#exercise08", "Incorrect! The output below should just be the numbers 10 through 1", true);
}

exercise09();
var output09 = $("#output09").text().trim();
if (output09 === "2468101214161820") {
    updateAnswer("#exercise09", "Correct!", false);
} else if (output07 === "") {
    updateAnswer("#exercise09", "<em>Use a for loop to count from 1 to 20, putting the even numbers in the div below</em>", false);
} else {
    updateAnswer("#exercise09", "Incorrect! The output below should just be the even numbers between 1 and 20", true);
}

exercise10("Hello there!".split(""));
var output10 = $("#output10").text().trim();
if (output10 === "Hello there!") {
    updateAnswer("#exercise10", "Correct!", false);
} else if (output10 === "") {
    updateAnswer("#exercise10", "<em>Use a for loop to append all the elements in 'arr10' to the div below.</em>", false);
} else {
    updateAnswer("#exercise10", "Incorrect! The output below should be a greeting.", true);
}

exercise11("Yur h et".split(""), "o'etebs!".split(""));
var output11 = $("#output11").text().trim();
if (output11 === "You're the best!") {
    updateAnswer("#exercise11", "Correct!", false);
} else if (output11 === "") {
    updateAnswer("#exercise11", "<em>Use a for loop to append all the elements in 'arrA' and 'arrB' to the div below.</em>", false);
} else {
    updateAnswer("#exercise11", "Incorrect! The output below should be a secret message.", true);
}


var output12 = ["jenny"];
var input12 = [8,6,7,5,3,0,9];
exercise12(input12, output12);
if (Array.isArray(output12) && output12.length === 5 && output12[1] === 8 && output12[2] === 6 && output12[3] === 7 && output12[4] === 9) {
    updateAnswer("#exercise12", "Correct!", false);
} else if (Array.isArray(output12) && output12.length === 1 && output12[0] === "jenny") {
    updateAnswer("#exercise12", "<em>Add the elements of 'arrA' that are greater than 5 to 'arrB'.", false);
} else {
    updateAnswer("#exercise12", "Incorrect! You should add to the end of arrB.", true);
}


## styles.css
body {
    background-color: #056839;
    font-family: sans-serif;
}

.exercise {
    margin: 10px 5px;
    padding: 2px 5px;
    background: white;
}

.exercise .answer {
    border: 1px solid #056839;
    padding: 4px;
    margin: 2px;
}
.exercise .output {
    padding: 4px;
    margin: 2px;
    background: #eee;
    font-family: monospace;
}

.exercise .answer.incorrect {
    color: #c00;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Exercises With Arrays And For Loops</title>
	</head>
	<body>
	<h1>Exercises With Arrays And For Loops</h1>
	<div id="exercise01" class="exercise">
	<h3>Exercise #01</h3>
	<div class="answer">
	</div>
	</div>
	<div id="exercise02" class="exercise">
	<h3>Exercise #02</h3>
	<div class="answer">
	</div>
	</div>
	<div id="exercise03" class="exercise">
	<h3>Exercise #03</h3>
	<div class="answer">
	</div>
	</div>
	<div id="exercise04" class="exercise">
	<h3>Exercise #04</h3>
	<div class="answer">
	</div>
	</div>
	<div id="exercise05" class="exercise">
	<h3>Exercise #05</h3>
	<div class="answer">
	</div>
	</div>
	<div id="exercise06" class="exercise">
	<h3>Exercise #06</h3>
	<div class="answer">
	</div>
	</div>
	<div id="exercise07" class="exercise">
	<h3>Exercise #07</h3>
	<div class="answer">
	</div>
	<div class="output" id="output07">
	</div>
	</div>
	<div id="exercise08" class="exercise">
	<h3>Exercise #08</h3>
	<div class="answer">
	</div>
	<div class="output" id="output08">
	</div>
	</div>
	<div id="exercise09" class="exercise">
	<h3>Exercise #09</h3>
	<div class="answer">
	</div>
	<div class="output" id="output09">
	</div>
	</div>
	<div id="exercise10" class="exercise">
	<h3>Exercise #10</h3>
	<div class="answer">
	</div>
	<div class="output" id="output10">
	</div>
	</div>
	<div id="exercise11" class="exercise">
	<h3>Exercise #11</h3>
	<div class="answer">
	</div>
	<div class="output" id="output11">
	</div>
	</div>
	<div id="exercise12" class="exercise">
	<h3>Exercise #12 (BONUS)</h3>
	<div class="answer">
	</div>
	</div>
	</body>
	</html>
	/*
	Exercise #1: An empty array
	In the function below, set the value of 'arr1' to be an empty array.
	*/
	function exercise01() {
	var arr1;
	return arr1;
	}

	/*
	Exercise #2: A not-empty array
	In the function below, set the value of 'arr2' to be an array with 3 elements.
	*/
	function exercise02() {
	var arr2;
	return arr2;
	}

	/*
	Exercise #3: The length of an array
	In the function below, set the value of 'length' to be the length of arr3.
	*/
	function exercise03(arr3) {
	var length;
	return length;
	}

	/*
	Exercise #4: Comparing array lengths
	In the function below, set the value of 'aEqualsB' to true if the length of
	a is equal to the length of b.
	*/
	function exercise04(a, b) {
	var aEqualsB;
	return aEqualsB;
	}

	/*
	Exercise #5: Comparing array lengths again
	In the function below, set the value of 'aGreaterThanB' to true if the length of
	a is greater than the length of b.
	*/
	function exercise05(a, b) {
	var aGreaterThanB;
	return aGreaterThanB;
	}

	/*
	Exercise #6: Adding to an array
	In the function below, add your name to the end of arr6.
	*/
	function exercise06(arr6) {
	// your code here
	}

	/*
	Exercise #7: For loops - counting up
	In the function below, create a for loop that runs from 0 to 5, appending
	that number to the div with the id 'output07'.
	*/
	function exercise07() {
	// your code here
	}

	/*
	Exercise #8: For loops - counting down
	In the function below, create a for loop that counts from 10 to 1, appending
	that number to the div with the id 'output08'.
	*/
	function exercise08() {
	// your code here
	}

	/*
	Exercise #9: For loops - only even numbers
	In the function below, create a for loop that counts from 1 to 20, appending
	only the even numbers to the div with the id 'output09'.
	*/
	function exercise09() {
	// your code here
	}

	/*
	Exercise #10: For loops - with an array
	In the function below, create a for loop that appends each element in 'arr10'
	to the div with the id 'output10'. The output will be a greeting.
	*/
	function exercise10(arr10) {
	// your code here
	}

	/*
	Exercise #11: For loops - One loop, two arrays
	In the function below, create a for loop that appends each element in 'arrA'
	and 'arrB' to the div with the id 'output11'. The output will be a secret message.

	Example: if arrA is ["H", "l", "o"] and arrB is ["e", "l", "!"], the final
	output would be "Hello!"

	Note: 'arrA' and 'arrB' are the same length
	*/
	function exercise11(arrA, arrB) {
	// your code here
	}

	/*
	BONUS Exercise #12: For loops - One loop, two arrays
	In the function below, create a for loop that adds elements in 'arrA'
	to 'arrB' if they are greater than 5.

	Example: if arrA is [1, 3, 5, 7, 9], you should add 7 and 9 to arrB
	*/
	function exercise12(arrA, arrB) {
	// your code here
	}

	function updateAnswer(exerciseId, html, isIncorrect) {
	var answerDiv = $(exerciseId).find(".answer").html(html).removeClass("incorrect");
	if (isIncorrect) {
	answerDiv.addClass("incorrect");
	}
	}

	var output01 = exercise01();
	if (Array.isArray(output01)) {
	if (output01.length === 0) {
	updateAnswer("#exercise01", "Correct!", false);
	} else {
	updateAnswer("#exercise01", "Incorrect! Your array should not have any elements.", true);
	}
	} else if (typeof output01 === "undefined") {
	updateAnswer("#exercise01", "<em>Set the value of the variable 'arr' to an empty array.</em>", false);
	} else {
	updateAnswer("#exercise01", "Incorrect! The variable 'arr1' is not an array.", true);
	}

	var output02 = exercise02();
	if (Array.isArray(output02)) {
	if (output02.length === 3) {
	updateAnswer("#exercise02", "Correct!", false);
	} else {
	updateAnswer("#exercise02", "Incorrect! Your array should have exactly 3 elements.", true);
	}
	} else if (typeof output02 === "undefined") {
	updateAnswer("#exercise02", "<em>Set the value of the variable 'arr2' to an empty array.</em>", false);
	} else {
	updateAnswer("#exercise02", "Incorrect! The variable 'arr2' is not an array.", true);
	}

	(function(){
	var inputs = [8,6,7];
	var output;
	for (var i = 0; i < inputs.length; i++) {
	output = exercise03(new Array(inputs[i]));
	if (typeof output === "undefined") {
	updateAnswer("#exercise03", "<em>Set the value of the variable 'length' to the length of 'arr3'.</em>", false);
	return;
	} else if (output !== inputs[i]) {
	updateAnswer("#exercise03", "Incorrect! Set the value of the variable 'length' to the length of 'arr3'.", true);
	return;
	}
	}
	updateAnswer("#exercise03", "Correct!", false);
	})();

	(function(){
	var inputs = [[5,3], [0,9], [0,0]];
	var expected = [false, false, true];
	var output;
	for (var i = 0; i < inputs.length; i++) {
	output = exercise04(new Array(inputs[i][0]), new Array(inputs[i][1]));
	if (typeof output === "undefined") {
	updateAnswer("#exercise04", "<em>Set the value of the variable 'aEqualsB' to true if the length of 'a' is equal to 'b'.</em>", false);
	return;
	} else if (output !== expected[i]) {
	updateAnswer("#exercise04", "Incorrect! Set the value of the variable 'aEqualsB' to true if the length of 'a' is equal to 'b'.", true);
	return;
	}
	}
	updateAnswer("#exercise04", "Correct!", false);
	})();

	(function(){
	var inputs = [[5,3], [0,9], [0,0]];
	var expected = [true, false, false];
	var output;
	for (var i = 0; i < inputs.length; i++) {
	output = exercise05(new Array(inputs[i][0]), new Array(inputs[i][1]));
	if (typeof output === "undefined") {
	updateAnswer("#exercise05", "<em>Set the value of the variable 'aGreaterThanB' to true if the length of 'a' is greater than 'b'.</em>", false);
	return;
	} else if (output !== expected[i]) {
	updateAnswer("#exercise05", "Incorrect! Set the value of the variable 'aGreaterThanB' to true if the length of 'a' is greater than 'b'.", true);
	return;
	}
	}
	updateAnswer("#exercise05", "Correct!", false);
	})();

	var output6 = ["Hello123"];
	exercise06(output6);
	if (!Array.isArray(output6) \|\| output6.length < 1 \|\| output6[0] !== "Hello123") {
	updateAnswer("#exercise06", "Incorrect! You should add your name to the end of the array.", true);
	} else if (output6.length < 2) {
	updateAnswer("#exercise06", "<em>Add your name to the end of 'arr6'.", false);
	} else {
	updateAnswer("#exercise06", "Correct!", false);
	}

	exercise07();
	var output07 = $("#output07").text().trim();
	if (output07 === "012345") {
	updateAnswer("#exercise07", "Correct!", false);
	} else if (output07 === "") {
	updateAnswer("#exercise07", "<em>Use a for loop to count up from 0 to 5, putting the numbers in the div below</em>", false);
	} else {
	updateAnswer("#exercise07", "Incorrect! The output below should just be the numbers 0 through 5", true);
	}

	exercise08();
	var output08 = $("#output08").text().trim();
	if (output08 === "10987654321") {
	updateAnswer("#exercise08", "Correct!", false);
	} else if (output07 === "") {
	updateAnswer("#exercise08", "<em>Use a for loop to count down from 10 to 1, putting the numbers in the div below</em>", false);
	} else {
	updateAnswer("#exercise08", "Incorrect! The output below should just be the numbers 10 through 1", true);
	}

	exercise09();
	var output09 = $("#output09").text().trim();
	if (output09 === "2468101214161820") {
	updateAnswer("#exercise09", "Correct!", false);
	} else if (output07 === "") {
	updateAnswer("#exercise09", "<em>Use a for loop to count from 1 to 20, putting the even numbers in the div below</em>", false);
	} else {
	updateAnswer("#exercise09", "Incorrect! The output below should just be the even numbers between 1 and 20", true);
	}

	exercise10("Hello there!".split(""));
	var output10 = $("#output10").text().trim();
	if (output10 === "Hello there!") {
	updateAnswer("#exercise10", "Correct!", false);
	} else if (output10 === "") {
	updateAnswer("#exercise10", "<em>Use a for loop to append all the elements in 'arr10' to the div below.</em>", false);
	} else {
	updateAnswer("#exercise10", "Incorrect! The output below should be a greeting.", true);
	}

	exercise11("Yur h et".split(""), "o'etebs!".split(""));
	var output11 = $("#output11").text().trim();
	if (output11 === "You're the best!") {
	updateAnswer("#exercise11", "Correct!", false);
	} else if (output11 === "") {
	updateAnswer("#exercise11", "<em>Use a for loop to append all the elements in 'arrA' and 'arrB' to the div below.</em>", false);
	} else {
	updateAnswer("#exercise11", "Incorrect! The output below should be a secret message.", true);
	}


	var output12 = ["jenny"];
	var input12 = [8,6,7,5,3,0,9];
	exercise12(input12, output12);
	if (Array.isArray(output12) && output12.length === 5 && output12[1] === 8 && output12[2] === 6 && output12[3] === 7 && output12[4] === 9) {
	updateAnswer("#exercise12", "Correct!", false);
	} else if (Array.isArray(output12) && output12.length === 1 && output12[0] === "jenny") {
	updateAnswer("#exercise12", "<em>Add the elements of 'arrA' that are greater than 5 to 'arrB'.", false);
	} else {
	updateAnswer("#exercise12", "Incorrect! You should add to the end of arrB.", true);
	}
	body {
	background-color: #056839;
	font-family: sans-serif;
	}

	.exercise {
	margin: 10px 5px;
	padding: 2px 5px;
	background: white;
	}

	.exercise .answer {
	border: 1px solid #056839;
	padding: 4px;
	margin: 2px;
	}
	.exercise .output {
	padding: 4px;
	margin: 2px;
	background: #eee;
	font-family: monospace;
	}

	.exercise .answer.incorrect {
	color: #c00;
	}