Activity 07: Arrays - INSTRUCTOR SOLUTION GUIDE

📋 Overview

This is the complete solution for Activity 07: Arrays. This guide provides instructors with detailed explanations, common student mistakes, discussion points, test cases, and assessment criteria.

Course: W2 Advanced JavaScript Foundations Activity: Activity 07 - Arrays Estimated Time: 60 minutes (for students) Difficulty: Beginner to Intermediate

🎯 Learning Objectives

By completing this activity, students will be able to:

✅ Understand array data structure and syntax ✅ Create and initialize arrays with multiple elements ✅ Access array elements using index notation ✅ Modify array elements by index assignment ✅ Use push() and pop() methods for array manipulation ✅ Iterate through arrays using forEach() method ✅ Apply conditional logic within array iterations ✅ Utilize index parameter for array modification ✅ Integrate JavaScript with HTML onclick events ✅ Transform data from one format to another

📁 Solution Files

graphql

activity-07-arrays/
├── script.js          # Complete solution with teaching comments
├── index.html         # HTML with REPLACE button for Exercise 3
├── package.json       # Dependencies for local dev server
├── setup.sh          # Setup script for environment
└── README.md         # This instructor guide

javascript

var animals = ["gorilla", "parrot", "elephant", "giraffe", "tiger"];
console.log(animals);

Common Mistakes:

❌ Using parentheses: var animals = ("gorilla", "parrot");
❌ Missing quotes: var animals = [gorilla, parrot];
❌ Missing commas: var animals = ["gorilla" "parrot"];
❌ Trailing comma: var animals = ["gorilla", "parrot",];

Discussion Points:

Why use square brackets [] instead of ()?
Can arrays hold different data types? (Yes! Mixed types allowed)
What's the difference between "gorilla" and gorilla? (String vs variable)
How many elements in the array? (5)

Test Cases:

javascript

// Test 1: Array created correctly
console.log(animals);  // Expected: ["gorilla", "parrot", "elephant", "giraffe", "tiger"]

// Test 2: Check length
console.log(animals.length);  // Expected: 5

// Test 3: Access first element
console.log(animals[0]);  // Expected: "gorilla"

Exercise 2: Push and Pop Methods (⏱️ 5 min)

Goal: Add and remove elements using push() and pop()

Solution:

javascript

var x = [100, 200, 300];
console.log(x);  // [100, 200, 300]

x.push(400);
console.log(x);  // [100, 200, 300, 400]

x.pop();
console.log(x);  // [100, 200, 300]

Common Mistakes:

❌ Wrong syntax: x.push = 400 (assignment, not method call)
❌ Pop with parameter: x.pop(400) (pop takes no parameters)
❌ Not understanding mutation: thinking original array doesn't change
❌ Using wrong method for beginning: x.pop() removes last, not first

Discussion Points:

What does push() return? (New length of array)
What does pop() return? (The removed element)
What happens if you pop() an empty array? (Returns undefined)
Can you push multiple elements at once? (Yes! x.push(1, 2, 3))

Test Cases:

javascript

// Test 1: Initial state
var x = [100, 200, 300];
console.log(x.length);  // Expected: 3

// Test 2: After push
var newLength = x.push(400);
console.log(newLength);  // Expected: 4
console.log(x);  // Expected: [100, 200, 300, 400]

// Test 3: After pop
var removed = x.pop();
console.log(removed);  // Expected: 400
console.log(x);  // Expected: [100, 200, 300]

// Test 4: Pop empty array
var empty = [];
console.log(empty.pop());  // Expected: undefined

Real-World Analogy:

Stack of plates: push = add plate on top, pop = remove top plate
Browser history: push = visit page, pop = go back
Undo system: push = save state, pop = undo

Exercise 3: Array Index Replacement System (⏱️ 10 min)

Goal: Create interactive seating chart with replacement functionality

Solution:

javascript

var seats = ["John", "Benjamin", "Hasan", "Lisa", "Tommy", "Kumar"];
var replaceIndex;
var newStudent;

function replace() {
    replaceIndex = prompt("Which seat do you want to replace? (0-5)");

    // Validation (BONUS)
    if (replaceIndex === null) return;
    replaceIndex = Number(replaceIndex);
    if (isNaN(replaceIndex) || replaceIndex < 0 || replaceIndex >= seats.length) {
        alert("Invalid seat number!");
        return;
    }

    newStudent = prompt("Who is replacing this seat?");
    if (newStudent === null || newStudent.trim() === "") {
        alert("Invalid name!");
        return;
    }

    // Replacement
    var oldStudent = seats[replaceIndex];
    seats[replaceIndex] = newStudent;

    alert("Seat " + replaceIndex + " updated!\n" + oldStudent + " → " + newStudent);
    console.log("Updated seats:", seats);
}

HTML Integration:

html

<button onclick="replace()">REPLACE SEAT</button>

Common Mistakes:

❌ Using element value as index: seats[replaceIndex] = newStudent where replaceIndex is a name
❌ Forgetting Number() conversion for numeric comparisons
❌ Off-by-one errors: thinking index 1 is first element
❌ Not adding onclick in HTML
❌ Using string literal: seats[replaceIndex] = "newStudent" instead of variable

Discussion Points:

Why does index start at 0? (Computer science convention)
What happens if you use index 100? (Creates sparse array)
Can you have negative indexes? (Yes, but not recommended)
What's array.length? (Number of elements)

Test Cases:

javascript

// Test 1: Valid replacement
// Click REPLACE → Enter 2 → Enter "Winnie"
// Expected: seats[2] changes from "Hasan" to "Winnie"
console.log(seats);  // ["John", "Benjamin", "Winnie", "Lisa", "Tommy", "Kumar"]

// Test 2: Edge case - first element
// Click REPLACE → Enter 0 → Enter "Alice"
console.log(seats[0]);  // Expected: "Alice"

// Test 3: Edge case - last element
// Click REPLACE → Enter 5 → Enter "Bob"
console.log(seats[5]);  // Expected: "Bob"

// Test 4: Invalid index (should show alert)
// Click REPLACE → Enter 100 → Should alert "Invalid seat number!"

// Test 5: Non-numeric input (should show alert)
// Click REPLACE → Enter "abc" → Should alert "Invalid seat number!"

Extension Challenge:

javascript

// Add swap functionality
function swap() {
    var index1 = Number(prompt("First seat:"));
    var index2 = Number(prompt("Second seat:"));

    var temp = seats[index1];
    seats[index1] = seats[index2];
    seats[index2] = temp;

    console.log("Swapped seats:", seats);
}

PART 2: Array Methods and Loops

Exercise 4: forEach Method with Simple Logging (⏱️ 5 min)

Goal: Create dairy products array and log each element

Solution:

javascript

var dairy = ["milk", "cheese", "yoghurt", "butter"];

dairy.forEach(function(item) {
    console.log(item);
});

Expected Output:

milk
cheese
yoghurt
butter

Common Mistakes:

❌ Missing parentheses: dairy.forEach (doesn't call method)
❌ Wrong callback syntax: dairy.forEach(item => console.log(item)) (ES6, teach traditional first)
❌ Using array name as parameter: dairy.forEach(function(dairy) { ... }) (shadows variable)
❌ Accessing by index unnecessarily: console.log(dairy[item]) (item IS the value)
❌ Missing curly braces for multi-line: dairy.forEach(function(item) console.log(item))

Discussion Points:

What does "forEach" mean? (For Each element)
Why use function keyword? (Defining callback function)
Can parameter be named anything? (Yes, but use meaningful names)
What's a callback? (Function passed to another function)
When to use forEach vs for loop? (forEach for simple iteration)

Comparison with for loop:

javascript

// Traditional for loop (manual)
for (var i = 0; i < dairy.length; i++) {
    console.log(dairy[i]);
}

// forEach (automatic)
dairy.forEach(function(item) {
    console.log(item);
});

Test Cases:

javascript

// Test 1: All items logged
dairy.forEach(function(item) {
    console.log(item);
});
// Expected output: milk, cheese, yoghurt, butter (each on new line)

// Test 2: Count iterations
var count = 0;
dairy.forEach(function(item) {
    count++;
});
console.log(count);  // Expected: 4

Extension Challenge:

javascript

// Format with bullets
dairy.forEach(function(item) {
    console.log("• " + item);
});

// Convert to uppercase
dairy.forEach(function(item) {
    console.log(item.toUpperCase());
});

Exercise 5: forEach with Conditional Logic - Charity System (⏱️ 10 min)

Goal: Implement charity funding system with conditional allocation

Solution:

javascript

var homes = [132000, 88000, 275000, 43000];

console.log("Initial funding:", homes);

homes.forEach(function(home) {
    if (home < 90000) {
        console.log(home + 50000);  // Add support
    } else {
        console.log(home);  // No change
    }
});

Expected Output:

scss

132000  (no change, already > 90000)
138000  (88000 + 50000)
275000  (no change, already > 90000)
93000   (43000 + 50000)

Common Mistakes:

❌ Trying to modify without index: home = home + 50000 (doesn't change array)
❌ Wrong comparison: home <= 90000 (includes 90000 exactly)
❌ Adding wrong amount: home + 5000 instead of home + 50000
❌ Logging original instead of calculated: console.log(home) in if block
❌ Missing else block: ``Organizations > 90``k not shown

Discussion Points:

Why doesn't home = home + 50000 modify the array? (Pass by value for primitives)
How to actually modify the array? (Need index parameter - Exercise 6)
Why $90,000 threshold? (Simulates poverty line)
What if we wanted tiered funding? (Multiple if/else if blocks)

Test Cases:

javascript

// Test 1: Organizations below threshold get funding
var homes = [88000, 43000];
homes.forEach(function(home) {
    if (home < 90000) {
        console.log(home + 50000);
    } else {
        console.log(home);
    }
});
// Expected: 138000, 93000

// Test 2: Organizations above threshold unchanged
var homes = [132000, 275000];
homes.forEach(function(home) {
    if (home < 90000) {
        console.log(home + 50000);
    } else {
        console.log(home);
    }
});
// Expected: 132000, 275000

// Test 3: Boundary case - exactly 90000
var homes = [90000];
homes.forEach(function(home) {
    if (home < 90000) {
        console.log(home + 50000);
    } else {
        console.log(home);
    }
});
// Expected: 90000 (no change, NOT < 90000)

Extension Challenge:

javascript

// Calculate total funding distributed
var totalAdded = 0;
homes.forEach(function(home) {
    if (home < 90000) {
        totalAdded += 50000;
        console.log(home + 50000);
    } else {
        console.log(home);
    }
});
console.log("Total additional funding: $" + totalAdded);

// Tiered funding system
homes.forEach(function(home) {
    if (home < 50000) {
        console.log(home + 75000);  // Severe need: +$75k
    } else if (home < 90000) {
        console.log(home + 50000);  // Moderate need: +$50k
    } else {
        console.log(home);  // No additional funding
    }
});

Exercise 6: forEach with Index - Rollercoaster Age Check (⏱️ 10 min)

Goal: Create age verification system using forEach with index

Solution:

javascript

var queue = [12, 8, 25, 11, 38];

console.log("Original queue:", queue);

queue.forEach(function(age, index) {
    if (age >= 12) {
        queue[index] = true;  // Can ride
    } else {
        queue[index] = false;  // Too young
    }
});

console.log("Updated queue:", queue);

Expected Output:

arduino

Original queue: [12, 8, 25, 11, 38]
Updated queue: [true, false, true, false, true]

Common Mistakes:

❌ Using element as index: queue[age] = true (uses age value 12 as index!)
❌ Forgetting index parameter: queue.forEach(function(age) { queue[index] = true; }) (ReferenceError)
❌ Wrong parameter order: queue.forEach(function(index, age) { ... }) (backwards!)
❌ Using strings: queue[index] = "true" (should be boolean true)
❌ Modifying local variable: age = true (doesn't change array)

Why Element as Index is Wrong:

javascript

var queue = [12, 8, 25];

// WRONG - using age (element value) as index
queue.forEach(function(age) {
    queue[age] = true;  // Sets queue[12]=true, queue[8]=true, queue[25]=true
});
console.log(queue);  // [12, 8, 25, undefined × 9, true, undefined × 12, true]
// Creates sparse array with slots 12 and 25 set to true!

// CORRECT - using index parameter
queue.forEach(function(age, index) {
    queue[index] = true;  // Sets queue[0]=true, queue[1]=true, queue[2]=true
});
console.log(queue);  // [true, true, true] ✅

Discussion Points:

Why use true/false instead of "yes"/"no"? (Booleans are standard)
What happens if age is exactly 12? (Can ride! >= 12 includes 12)
How to count how many can ride? (Filter or loop through again)
Can we keep original ages AND add eligibility? (Yes! Create new array)

Test Cases:

javascript

// Test 1: Basic transformation
var queue = [12, 8, 25, 11, 38];
queue.forEach(function(age, index) {
    queue[index] = age >= 12;
});
console.log(queue);  // Expected: [true, false, true, false, true]

// Test 2: Boundary case - exactly 12
var queue = [12];
queue.forEach(function(age, index) {
    queue[index] = age >= 12;
});
console.log(queue[0]);  // Expected: true (12 >= 12)

// Test 3: All eligible
var queue = [15, 20, 30];
queue.forEach(function(age, index) {
    queue[index] = age >= 12;
});
console.log(queue);  // Expected: [true, true, true]

// Test 4: None eligible
var queue = [5, 8, 10];
queue.forEach(function(age, index) {
    queue[index] = age >= 12;
});
console.log(queue);  // Expected: [false, false, false]

// Test 5: Count eligible
var queue = [12, 8, 25, 11, 38];
queue.forEach(function(age, index) {
    queue[index] = age >= 12;
});
var canRide = queue.filter(function(eligible) { return eligible === true; }).length;
console.log(canRide);  // Expected: 3

Extension Challenge:

javascript

// Keep original ages AND add eligibility
var ages = [12, 8, 25, 11, 38];
var eligible = [];

ages.forEach(function(age) {
    eligible.push(age >= 12);
});

console.log("Ages:", ages);        // [12, 8, 25, 11, 38]
console.log("Eligible:", eligible);  // [true, false, true, false, true]

// Create age tiers
var queue = [12, 8, 25, 11, 38];
queue.forEach(function(age, index) {
    if (age < 12) {
        queue[index] = "child";
    } else if (age < 18) {
        queue[index] = "teen";
    } else if (age < 65) {
        queue[index] = "adult";
    } else {
        queue[index] = "senior";
    }
});
console.log(queue);  // ["teen", "child", "adult", "child", "adult"]

// Detailed report with years needed
var ages = [12, 8, 25, 11, 38];
ages.forEach(function(age, index) {
    var status = age >= 12 ? "CAN RIDE" : "TOO YOUNG";
    var diff = age >= 12 ? "" : " (needs " + (12 - age) + " more years)";
    console.log("Person " + (index + 1) + ": " + age + " years → " + status + diff);
});
// Output:
// Person 1: 12 years → CAN RIDE
// Person 2: 8 years → TOO YOUNG (needs 4 more years)
// Person 3: 25 years → CAN RIDE
// Person 4: 11 years → TOO YOUNG (needs 1 more years)
// Person 5: 38 years → CAN RIDE

📊 Assessment Rubric

Grading Breakdown (Total: 100 points + 5 bonus)

Exercise	Points	Criteria
Exercise 1	10	Correct array syntax with [], 5 string elements, console.log() displays array
Exercise 2	15	Initial array with 3 elements, correct push() usage, correct pop() usage, console logs at each step
Exercise 3	25	Seats array with 6 names, replace() function defined, two prompts for input, correct array[index] replacement, HTML button with onclick
Exercise 4	10	Dairy array with 4 elements, correct forEach syntax, callback function logs each item
Exercise 5	20	Homes array with 4 funding amounts, forEach with if/else, correct condition (< 90000), correct calculation (+ 50000), both branches log correctly
Exercise 6	20	Queue array with 5 ages, logs original array, forEach with TWO parameters (age, index), correct condition (>= 12), modifies array with boolean true/false, logs updated array
BONUS	+5	Input validation in Exercise 3 (null check, NaN check, range check, empty string check)

Quality Criteria

Code Quality (embedded in each exercise):

✅ Proper variable naming (camelCase)
✅ Consistent indentation
✅ Meaningful parameter names in callbacks
✅ Comments for complex logic (optional but encouraged)

Functionality (must work correctly):

✅ No syntax errors
✅ Correct output in console
✅ Interactive features work (Exercise 3 button)
✅ Edge cases handled (bonus for Exercise 3)

Understanding (assessed through code correctness):

✅ Arrays created with correct syntax
✅ Index-based access and modification
✅ forEach parameters used correctly
✅ Conditional logic implemented properly
✅ HTML/JS integration functional

🎓 Teaching Tips

Recommended Teaching Progression

Day One: Exercises 1-2 (Array Basics)

Focus on syntax and basic operations
Practice creating different types of arrays
Lots of console.log() for visualization
Show array inspector in browser dev tools

Day 2: Exercise 3 (Index Access & HTML Integration)

Introduce HTML/JS connection
Practice index-based operations
Build simple interactive systems
Emphasize zero-based indexing

Day 3: Exercise 4 (forEach Introduction)

Introduce iteration concept
Compare with traditional for loops
Practice with different arrays
Explain callback functions

Day 4: Exercise 5 (forEach + Conditionals)

Combine forEach with if/else
Real-world problem solving
Business logic implementation
Discuss data processing patterns

Day 5: Exercise 6 (forEach with Index)

Advanced forEach with index parameter
Array modification patterns
Data transformation concepts
Review all exercises

Common Struggles & Solutions

One. Zero-Based Indexing

Struggle: Thinking first element is [1] instead of [0]
Solution: Visual diagrams, emphasize "position vs index"
Tip: Use physical objects (books, cards) with number labels

2. Array Syntax Confusion

Struggle: Using () instead of [] for arrays
Solution: Side-by-side comparisons with functions
Tip: "Square brackets = data collection, round = function call"

3. forEach Parameter Understanding

Struggle: Using element as index (queue[age] instead of queue[index])
Solution: Step-by-step execution logs showing parameter values
Tip: Console.log() both parameters to show difference

4. Array Modification vs Local Variables

Struggle: Thinking "home = true" modifies array
Solution: Memory diagrams showing pass-by-value
Tip: Show before/after array state to prove no change

5. HTML/JavaScript Integration

Struggle: Forgetting onclick in HTML
Solution: Demonstrate full workflow with both files open
Tip: Use live coding to show connection

Interactive Demonstrations

Demo 1: Array Inspector

javascript

var demo = ["a", "b", "c"];
console.table(demo);  // Shows nice table in console

Demo 2: forEach Execution Trace

javascript

var nums = [10, 20, 30];
nums.forEach(function(num, index) {
    console.log("Iteration:", index, "| Value:", num);
});
// Shows how forEach works step-by-step

Demo 3: Element vs Index Confusion

javascript

var ages = [12, 8];

console.log("WRONG WAY:");
ages.forEach(function(age) {
    console.log("Setting ages[" + age + "] = true");
    // Don't actually do it, just show what it would mean
});

console.log("\nCORRECT WAY:");
ages.forEach(function(age, index) {
    console.log("Setting ages[" + index + "] = " + (age >= 12));
});

🧪 Testing Scenarios

Automated Test Suite (Optional for Advanced Classes)

javascript

// Test Exercise 1
function testExercise1() {
    var animals = ["gorilla", "parrot", "elephant", "giraffe", "tiger"];
    console.assert(Array.isArray(animals), "Should be array");
    console.assert(animals.length === 5, "Should have 5 elements");
    console.assert(animals[0] === "gorilla", "First element should be 'gorilla'");
    console.log("✅ Exercise 1 tests passed");
}

// Test Exercise 2
function testExercise2() {
    var x = [100, 200, 300];
    x.push(400);
    console.assert(x.length === 4, "Length should be 4 after push");
    console.assert(x[3] === 400, "Last element should be 400");

    x.pop();
    console.assert(x.length === 3, "Length should be 3 after pop");
    console.assert(x[x.length - 1] === 300, "Last element should be 300");
    console.log("✅ Exercise 2 tests passed");
}

// Test Exercise 6 (most complex)
function testExercise6() {
    var queue = [12, 8, 25, 11, 38];
    queue.forEach(function(age, index) {
        queue[index] = age >= 12;
    });

    console.assert(queue[0] === true, "12 should be eligible");
    console.assert(queue[1] === false, "8 should not be eligible");
    console.assert(queue[2] === true, "25 should be eligible");
    console.assert(queue[3] === false, "11 should not be eligible");
    console.assert(queue[4] === true, "38 should be eligible");
    console.log("✅ Exercise 6 tests passed");
}

// Run all tests
testExercise1();
testExercise2();
testExercise6();

Manual Testing Checklist

Exercise 3 Interactive Testing:

Click REPLACE button
Enter valid index (0-5)
Enter valid student name
Verify seat changed in console
Test invalid index (100) - should show error
Test non-numeric input ("abc") - should show error
Test cancel on first prompt - should exit gracefully
Test empty string on second prompt - should show error

🚀 Extension Projects

Project One: Shopping Cart System (Easy)

javascript

var cart = ["apple", "banana", "orange"];
var prices = [1.50, 0.75, 2.00];

function addItem(item, price) {
    cart.push(item);
    prices.push(price);
    console.log("Added:", item, "($" + price + ")");
}

function removeItem() {
    var item = cart.pop();
    var price = prices.pop();
    console.log("Removed:", item, "($" + price + ")");
}

function calculateTotal() {
    var total = 0;
    prices.forEach(function(price) {
        total += price;
    });
    console.log("Total: $" + total.toFixed(2));
}

addItem("grape", 3.00);
calculateTotal();  // $7.25
removeItem();
calculateTotal();  // $4.25

Project 2: Student Grade Tracker (Medium)

javascript

var students = ["Alice", "Bob", "Charlie", "David"];
var grades = [85, 92, 78, 95];

function calculateAverage() {
    var sum = 0;
    grades.forEach(function(grade) {
        sum += grade;
    });
    return sum / grades.length;
}

function countPassFail() {
    var pass = 0;
    var fail = 0;
    grades.forEach(function(grade) {
        if (grade >= 70) {
            pass++;
        } else {
            fail++;
        }
    });
    console.log("Pass:", pass, "Fail:", fail);
}

function findTopStudent() {
    var highest = 0;
    var topStudent = "";
    grades.forEach(function(grade, index) {
        if (grade > highest) {
            highest = grade;
            topStudent = students[index];
        }
    });
    console.log("Top student:", topStudent, "with grade:", highest);
}

console.log("Class average:", calculateAverage());
countPassFail();
findTopStudent();

Project 3: Todo List Manager (Medium)

javascript

var todos = ["Buy groceries", "Finish homework", "Call mom"];
var completed = [false, false, false];

function addTodo(task) {
    todos.push(task);
    completed.push(false);
    console.log("Added:", task);
}

function completeTodo(index) {
    if (index >= 0 && index < todos.length) {
        completed[index] = true;
        console.log("Completed:", todos[index]);
    }
}

function displayTodos() {
    console.log("\nTodo List:");
    todos.forEach(function(task, index) {
        var status = completed[index] ? "✓" : "○";
        console.log(status, (index + 1) + ".", task);
    });
}

displayTodos();
completeTodo(1);
displayTodos();
addTodo("Clean room");
displayTodos();

Array index diagrams
Memory representation charts
forEach execution flowcharts
Before/after transformation examples

💾 Solution Verification

Quick Verification Checklist

Part One: Basic Operations

Exercise 1 creates array with 5 elements
Exercise 2 demonstrates push and pop with 3 console logs
Exercise 3 has replace() function and HTML button
Exercise 3 successfully modifies seats array

Part 2: Array Methods

Exercise 4 uses forEach to log 4 dairy items
Exercise 5 uses forEach with if/else for funding
Exercise 6 uses forEach with index parameter
Exercise 6 transforms ages to booleans

Code Quality

No syntax errors
Proper indentation
Meaningful variable names
Console output is clear

Functionality

All exercises run without errors
Console logs show expected output
REPLACE button works in browser
Arrays are properly modified where required

📞 Support

If students encounter issues:

Check browser console (F12) for error messages
Verify file linking - is script.js properly linked in HTML?
Check syntax - missing commas, brackets, parentheses?
Test incrementally - run each exercise separately
Use console.log() - add logs to debug
Compare with solution - check differences carefully

Common error messages and fixes:

Uncaught ReferenceError: X is not defined -> Variable not declared or spelled wrong
Uncaught TypeError: X is not a function -> Trying to call non-function or wrong method name
Uncaught SyntaxError: Unexpected token -> Missing bracket, comma, or quote

✅ Completion Checklist

Students should verify they have:

Completed all 6 exercises
All console logs produce correct output
REPLACE button functions correctly
No errors in browser console
Arrays properly created and modified
forEach methods use correct parameters
Code follows JavaScript conventions
Tested all functionality in browser

Bonus completion:

Added input validation to Exercise 3
Tried extension challenges
Created custom array project
Helped classmates understand concepts

Version: 1.0 Last Updated: 2025-10-10 Author: Telebort Engineering Course: W2 Advanced JavaScript Foundations

Template Answer 7: Arrays

📦 Project Files Included:

Activity 07: Arrays - INSTRUCTOR SOLUTION GUIDE

📋 Overview

🎯 Learning Objectives

📁 Solution Files

🏗️ Exercise Breakdown

PART 1: Basic Array Operations

Exercise One: Create and Display Arrays (⏱️ 5 min)

Exercise 2: Push and Pop Methods (⏱️ 5 min)

Exercise 3: Array Index Replacement System (⏱️ 10 min)

PART 2: Array Methods and Loops

Exercise 4: forEach Method with Simple Logging (⏱️ 5 min)

Exercise 5: forEach with Conditional Logic - Charity System (⏱️ 10 min)

Exercise 6: forEach with Index - Rollercoaster Age Check (⏱️ 10 min)

📊 Assessment Rubric

Grading Breakdown (Total: 100 points + 5 bonus)

Quality Criteria

🎓 Teaching Tips

Recommended Teaching Progression

Common Struggles & Solutions

Interactive Demonstrations

🧪 Testing Scenarios

Automated Test Suite (Optional for Advanced Classes)

Manual Testing Checklist

🚀 Extension Projects

Project One: Shopping Cart System (Easy)

Project 2: Student Grade Tracker (Medium)

Project 3: Todo List Manager (Medium)

📚 Additional Resources

For Instructors:

For Students:

Visual Aids:

💾 Solution Verification

Quick Verification Checklist

📞 Support

✅ Completion Checklist