Activity 08: Objects - Template Solution (Instructor Guide)

📋 Overview

This is the complete reference solution for Activity 08: Objects. This solution demonstrates best practices, comprehensive teaching comments, and serves as the gold standard for grading student submissions.

🎯 Learning Objectives:

• Create objects using object literal syntax
• Access object properties using dot notation
• Modify object properties after creation
• Implement object methods using arrow functions
• Toggle boolean states with the NOT operator (!)
• Manipulate DOM elements and CSS classes

⏱️ Estimated Time: 45-60 minutes

📁 Solution Contents

activity-08-object/
├── script.js          # Complete solution with teaching comments
├── index.html         # HTML structure with Exercise 3 button
├── package.json       # Project dependencies (servor for dev server)
├── setup.sh           # Setup script for environment
└── README.md          # This instructor guide

🏗️ Exercise Breakdown

Exercise One: Basic Object Creation and Property Access (30%)

⏱️ Time: 10-15 minutes

What Students Learn:

• Object literal syntax using { }
• Key-value pairs (properties)
• Dot notation for property access
• Difference between objects and arrays

Implementation:

var myPet = {
    animal: "pug",
    name: "Maya"
};

console.log(myPet.animal);  // Output: pug
console.log(myPet.name);    // Output: Maya

Key Teaching Points:

1. Objects use { }, arrays use [ ]
2. Properties are key-value pairs separated by colons
3. Multiple properties separated by commas
4. Dot notation is preferred for known property names
5. Property values can be any data type

Common Student Mistakes:

• ❌ Using [] instead of {} for objects
• ❌ Forgetting colons between keys and values
• ❌ Missing commas between properties
• ❌ Using myPet[name] instead of myPet.name or myPet["name"]
• ❌ Typos in property names (case-sensitive!)

Grading Checklist:

• Object created with var myPet = { }
• Contains animal property with a value
• Contains name property with a value
• Both properties logged to console correctly
• Uses dot notation for access

Exercise 2: Object Property Modification (30%)

⏱️ Time: 15-20 minutes

What Students Learn:

• Objects are mutable (can be changed after creation)
• Modifying properties vs recreating objects
• Assignment operator for property updates
• Maintaining object structure while changing values

Implementation:

// Provided object
var movie = {
    name: "Luca",
    release: "June 18, 2021",
    genre: "Comedy/Adventure",
    duration: "1h 35m",
    director: "Enrico Casarosa"
};

// Modify ALL properties (example with "Raya and the Last Dragon")
movie.name = "Raya and the Last Dragon";
movie.release = "March 5, 2021";
movie.genre = "Fantasy/Adventure";
movie.duration = "1h 47m";
movie.director = "Don Hall and Carlos López Estrada";

console.log(movie);

Key Teaching Points:

1. Modification vs Recreation: Use movie.name = "New" NOT var movie = { name: "New" }
2. Objects are mutable - properties can change after creation
3. Must modify ALL 5 properties (name, release, genre, duration, director)
4. Order of modification doesn't matter
5. Can modify to different data types if needed

Common Student Mistakes:

• ❌ Recreating entire object instead of modifying properties
• ❌ Using == (comparison) instead of = (assignment)
• ❌ Forgetting to modify all 5 properties
• ❌ Trying to modify inside object declaration: {name: "Luca" = "New"} ❌
• ❌ Creating typo properties: movie.nam = "New" creates NEW property!

Discussion Points:

• Why modify instead of recreate? (Efficiency, reference preservation)
• Can we add NEW properties? (Yes! movie.rating = "PG")
• What if property doesn't exist? (Creates new property)
• Can we delete properties? (Yes! delete movie.director)

Grading Checklist:

• Original movie object present in code
• All 5 properties modified (not recreated)
• Modified object logged to console
• Did NOT recreate the entire object
• Modifications done AFTER object creation

Exercise 3: Object with Methods - Light Bulb Toggle (40%)

⏱️ Time: 20-25 minutes

What Students Learn:

• Object methods (functions as properties)
• Arrow function syntax in objects
• Boolean toggling with NOT operator (!)
• DOM manipulation (querySelector, textContent, classList)
• Event handling (onclick attribute)
• CSS class manipulation (classList.replace)

Implementation:

JavaScript (script.js):

// Select the button element
var lightBtn = document.querySelector('button');

// Create light object with method
var light = {
    on: false,  // Initial state: OFF

    toggle: () => {
        // Toggle the boolean state
        light.on = !light.on;

        // Update button based on state
        if (light.on) {
            lightBtn.textContent = "On";
            lightBtn.classList.replace("btn-dark", "btn-warning");
        } else {
            lightBtn.textContent = "Off";
            lightBtn.classList.replace("btn-warning", "btn-dark");
        }
    }
};

HTML (index.html):

<button class="btn btn-dark" onclick="light.toggle()">Off</button>

Key Teaching Points:

1. Object Methods: Functions stored as object properties

   • Syntax: methodName: () => { code }
   • Called with: objectName.methodName()

2. Arrow Functions in Objects:

   • ✅ Use object name: light.on = !light.on
   • ❌ Don't use this: this.on = !this.on (doesn't work with arrow functions!)
   • Alternative: Regular function + this works, but we use arrow for this exercise

3. Boolean Toggle Pattern:

   • light.on = !light.on flips true <-> false
   • !false → true
   • !true → false
   • Standard pattern for toggles in programming

4. classList.replace() vs add():

   • ✅ replace("old", "new") - swaps one class for another
   • ❌ add("new") - adds class but doesn't remove old one
   • Replace ensures only ONE color class active at a time

5. Bootstrap Classes:

   • btn-dark = dark grey (OFF state)
   • btn-warning = yellow (ON state, like a light bulb!)

Common Student Mistakes:

1. Arrow Function Issues:

   • ❌ toggle: function() { } - Using function keyword instead of arrow
   • ❌ this.on - Using this with arrow functions (doesn't work!)
   • ✅ toggle: () => { } and light.on - Correct!

2. Toggle Logic Errors:

   • ❌ light.on = true; - Hardcoded, doesn't toggle
   • ❌ light.on = !true; - Always sets to false
   • ✅ light.on = !light.on; - Correctly toggles

3. classList Mistakes:

   • ❌ classList.add("btn-warning") - Adds without removing old class
   • ❌ classList.remove("btn-dark") then classList.add("btn-warning") - Works but verbose
   • ✅ classList.replace("btn-dark", "btn-warning") - Clean, atomic

4. HTML Integration Errors:

   • ❌ onclick="toggle()" - Missing object reference
   • ❌ onclick="light.toggle" - Missing parentheses
   • ✅ onclick="light.toggle()" - Correct!

5. Selector Issues:

   • ❌ document.querySelector('.button') - Wrong selector
   • ❌ Not selecting button at all
   • ✅ document.querySelector('button') - Correct!

6. Incomplete Updates:

   • ❌ Only changing textContent, not classList
   • ❌ Only changing classList, not textContent
   • ✅ Update BOTH for complete visual change

Testing Checklist:

Before grading, verify:

1. Load page -> Button shows "Off" (dark/btn-dark)
2. Click once -> Button shows "On" (yellow/btn-warning)
3. Click again -> Button shows "Off" (dark/btn-dark)
4. Rapid clicking -> Toggles correctly every time
5. Console logs -> Shows state changes (if solution includes logging)

Grading Checklist:

• var lightBtn = document.querySelector('button') present
• Light object created with on: false property
• Toggle method uses arrow function syntax
• Toggle flips state with light.on = !light.on
• textContent updates to "On"/"Off"
• classList.replace() swaps classes correctly
• HTML button has onclick="light.toggle()"
• Button toggles correctly when clicked

🎯 Assessment Rubric

Total: 100 points

Exercise One: Basic Object Creation (30 points)

• Object created with correct syntax (10 pts)
• Two properties defined correctly (10 pts)
• Properties accessed and logged (10 pts)

Exercise 2: Property Modification (30 points)

• Original movie object present (5 pts)
• All 5 properties modified correctly (20 pts)
• Modified object logged (5 pts)

Exercise 3: Object Methods (40 points)

• Light object with on property (10 pts)
• Toggle method with arrow function (10 pts)
• Correct toggle logic (!light.on) (10 pts)
• Button updates (textContent + classList) (5 pts)
• HTML onclick integration (5 pts)

🐛 Debugging Guide for Students

Console shows "undefined"

Likely causes:

• Property name misspelled
• Object not created yet
• Wrong capitalization (JavaScript is case-sensitive)

How to fix:

// Check if object exists
console.log(myPet);  // Should show full object

// Check property name
console.log(myPet.animal);  // Not myPet.Animal or myPet.anmial

Button doesn't respond to clicks

Likely causes:

• Missing onclick attribute in HTML
• Wrong onclick value (forgot object name)
• JavaScript error preventing execution

How to fix:

<!-- WRONG -->
<button onclick="toggle()">Off</button>

<!-- CORRECT -->
<button onclick="light.toggle()">Off</button>

Check console (F12) for errors!

Button text changes but color doesn't

Likely causes:

• Bootstrap CSS not loaded
• Using classList.add() instead of classList.replace()
• Wrong class names

How to fix:

// WRONG - adds class without removing old one
lightBtn.classList.add("btn-warning");

// CORRECT - replaces old class with new one
lightBtn.classList.replace("btn-dark", "btn-warning");

Check HTML <head> has Bootstrap CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">

State doesn't toggle (always ON or always OFF)

Likely causes:

• Hardcoded value instead of toggling
• Wrong toggle logic

How to fix:

// WRONG - hardcoded
light.on = true;

// CORRECT - toggle with NOT operator
light.on = !light.on;

Add debugging:

console.log("Before:", light.on);
light.on = !light.on;
console.log("After:", light.on);

💡 Extension Challenges

Easy: Add Click Counter

Add a property to track total clicks:

var light = {
    on: false,
    clickCount: 0,
    toggle: () => {
        light.clickCount++;
        light.on = !light.on;
        console.log("Total clicks:", light.clickCount);
        // ... rest of code
    }
};

Medium: Multi-State Light (Dim, Medium, Bright, Off)

var light = {
    state: 0,  // 0=off, 1=dim, 2=medium, 3=bright
    toggle: () => {
        light.state = (light.state + 1) % 4;  // Cycle 0→1→2→3→0
        // Update button color based on state
    }
};

Medium: Traffic Light (Red, Yellow, Green)

Three buttons that cycle through states with appropriate colors.

Hard: Auto-Off Timer

Light automatically turns off after 5 seconds:

toggle: () => {
    light.on = !light.on;
    if (light.on) {
        setTimeout(() => {
            light.on = false;
            // Update button to OFF
        }, 5000);  // 5 seconds
    }
}

Expert: Multiple Lights

Create 3 separate light objects with 3 buttons that toggle independently.

🔍 Code Review Checklist

Use this when grading student submissions:

General Code Quality

• Code is properly indented
• Variable names are descriptive (camelCase)
• No syntax errors
• Console has no errors when running

Exercise 1

• Object uses { } not [ ]
• Has exactly 2 properties: animal and name
• Properties logged separately (not whole object)
• Uses dot notation for access

Exercise 2

• Original movie object code is present
• Modifications done AFTER object creation
• All 5 properties have new values
• Did NOT recreate the object
• New values match student's chosen movie

Exercise 3

• Button element selected with querySelector
• Light object has on: false property
• Toggle method uses arrow function () => { }
• Toggle uses !light.on pattern
• Updates both textContent AND classList
• Uses classList.replace() not just add()
• HTML button has correct onclick="light.toggle()"
• Actually works when tested

📚 Additional Teaching Resources

Visual Aids

1. Object vs Array Diagram: Show side-by-side comparison
2. Toggle Flow Chart: Visualize state changes
3. classList Methods Table: Compare add/remove/replace/toggle

Live Demos

1. Show broken code -> fix it together
2. Demonstrate this keyword issue with arrow functions
3. Live debug session with F12 console

Discussion Questions

1. "When would you use an object instead of separate variables?"
2. "Can objects contain other objects? (Yes! Nested objects)"
3. "What's the difference between a property and a method?"
4. "Why does light.on = !light.on toggle instead of breaking?"

🎓 Common Misconceptions

"Objects and Arrays are the Same"

Misconception: Students confuse { } and [ ]

Clarification:

• Objects { } -> Key-value pairs, unordered
• Arrays [ ] -> Indexed list, ordered

"'this' Always Refers to the Object"

Misconception: this.on should work in arrow functions

Clarification:

• Arrow functions DON'T bind this
• Use object name directly: light.on
• OR use regular function for this to work

"classList.add() is Enough"

Misconception: Adding new class without removing old one

Clarification:

• add() -> Can have multiple classes (btn-dark AND btn-warning = undefined behavior)
• replace() -> Swaps classes atomically, ensures only one active

"Properties Must Be Declared First"

Misconception: Can't add properties later

Clarification:

• Can add anytime: myPet.age = 3; (creates new property)
• Can delete: delete myPet.age;
• Objects are flexible!

🚀 Setup Instructions

For Instructors Testing This Solution:

1. Navigate to solution directory:

   bash

   cd "Paid Courses/W2 Advanced JavaScript Foundations/Template Solution/activity-08-object"
   

2. Run setup script:

   bash

   chmod +x setup.sh
   ./setup.sh
   

3. Start development server:

   bash

   npm start
   

4. Open in browser:

   • Navigate to: http://localhost:8080
   • Open console: Press F12

5. Test all exercises:

   • Check console for Exercise 1 and 2 outputs
   • Click button for Exercise 3 toggle
   • Verify all functionality works

Alternative (No Server):

Simply open index.html directly in a browser. Console logging and button will work, but no live reload.

📝 Grading Notes

Quick Grading Tips:

1. Run student code first - does it work?
2. Check console for errors
3. Test button clicking (Exercise 3)
4. Review code structure against checklist
5. Look for teaching comments (bonus points!)

Red Flags (Immediate Point Deduction):

• ❌ Code doesn't run (syntax errors)
• ❌ Button doesn't toggle
• ❌ Recreated objects instead of modifying
• ❌ Missing exercises entirely
• ❌ Plagiarized code (exact match to solution)

Bonus Points (Optional):

• ✅ Added extra console.log for debugging
• ✅ Chose creative pet/movie examples
• ✅ Added comments explaining their code
• ✅ Implemented extension challenges
• ✅ Clean, well-organized code

🔗 Related Concepts

Prerequisites:

• Variables (var, let, const)
• Data types (string, number, boolean)
• Conditional statements (if/else)
• Console logging
• DOM selection (querySelector)

Next Topics:

• Object methods with parameters
• Object constructors
• this keyword deep dive
• Array of objects
• Object destructuring (ES6)
• JSON (JavaScript Object Notation)

📄 File Structure Reference

activity-08-object/
│
├── script.js          ← Complete solution with teaching comments
│   ├── Exercise 1: Pet object (myPet)
│   ├── Exercise 2: Movie object modification
│   ├── Exercise 3: Light object with toggle method
│   └── Comprehensive instructor notes
│
├── index.html         ← HTML structure
│   ├── Bootstrap 4.6.2 CSS
│   ├── Exercise 3 button with onclick
│   └── Script tag linking to script.js
│
├── package.json       ← Dependencies (servor for dev server)
├── setup.sh           ← Automated setup script
└── README.md          ← This comprehensive instructor guide

📞 Support

For questions about this solution:

• Review inline comments in script.js
• Check "Instructor Notes" sections
• Consult debugging guide above

For curriculum questions:

• Refer to Activity 08 MDX file in course materials
• Check W2 course overview documentation

✅ Solution Completeness Checklist

• Exercise One: Basic object creation implemented
• Exercise 2: Property modification implemented
• Exercise 3: Object methods with toggle implemented
• All teaching comments included
• Common mistakes documented
• Edge cases explained
• Discussion points provided
• Extension challenges suggested
• Assessment rubric included
• Debugging guide complete
• Code follows gold standard pattern from Project 01

Last Updated: 2025-10-10 Solution Version: One.0 Based on Pattern: Project 01 BMI Calculator Template Solution