Skip to content

Instantly share code, notes, and snippets.

@stormsweeper

stormsweeper/index.html

Last active April 25, 2018 19:19
Show Gist options
  • Save stormsweeper/9e7149f88bc601c76679c41aea03be59 to your computer and use it in GitHub Desktop.
Save stormsweeper/9e7149f88bc601c76679c41aea03be59 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=9e7149f88bc601c76679c41aea03be59
Raw
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>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.html","editor.css","console"]}
Raw
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);
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment