Activity 12: Debugging Challenge B - TEMPLATE SOLUTION

Complete Instructor Guide for All 4 Challenges

📚 Overview

This Template Solution provides gold standard implementations for all 4 debugging challenges in Activity 12. Each challenge solution includes:

✅ Box-drawing characters for section headers ✅ Teaching comments explaining WHY, not just HOW ✅ Common student mistakes documented per challenge ✅ Edge cases and gotchas highlighted ✅ Discussion points for classroom conversation ✅ Extension challenges for advanced students ✅ Console logging for step-by-step execution ✅ Assessment rubrics for each challenge

🎯 Challenge Summary

Total Time: 55 minutes

📁 Folder Structure

Template Solution/
└── activity-12-debugging-challenge-b/
    ├── README.md (this file)
    └── debugging-challenge-questions/
        ├── Challenge-1-Drink Menu/
        │   ├── index.html
        │   └── script.js
        ├── Challenge-2-DOM Manipulation/
        │   ├── index.html
        │   └── script.js
        ├── Challenge-3-Profile Object/
        │   ├── index.html
        │   └── script.js
        └── Challenge-4-Button/
            ├── index.html
            └── script.js

🏆 Challenge One: Array Operations and Interactive Drink Menu

Location: debugging-challenge-questions/Challenge-1-Drink Menu/

Learning Objectives

• Master array declaration and initialization
• Use array mutation methods (push, pop)
• Iterate arrays with forEach()
• Create interactive functions with user prompts
• Understand array index access and modification

Solution Highlights

Part A: Array Creation

let drinks = ["Coffee", "Tea", "Milo", "Horlicks", "Apple Juice"];

Teaching Points:

• Use let (not const) because array will be modified
• Square brackets [] for arrays
• Commas between elements
• Consistent data types (all strings)

Part B: Array Methods

let removedDrink = drinks.pop();  // Returns "Apple Juice"
let newLength = drinks.push("Matcha");  // Returns 5

Teaching Points:

• Both methods mutate the original array
• pop() returns removed element
• push() returns new array length
• Methods work on END of array

Part C: forEach Iteration

drinks.forEach((drink, index) => {
    console.log(`${index}: ${drink}`);
});

Teaching Points:

• Arrow function syntax () => {}
• Template literals with backticks
• First parameter = element, second = index
• Cannot break out of forEach loop

Part D: Interactive Function

function change() {
    let drinkIndex = prompt("Which drink do you want to replace?");
    let newDrink = prompt("What is the new drink?");
    drinks[drinkIndex] = newDrink;
    console.log(drinks);
}

Enhanced Version (with validation):

• Checks for null (user cancelled)
• Validates numeric index
• Checks bounds (0 to drinks.length-1)
• Validates non-empty drink name
• Logs old and new values

Common Student Mistakes

1. Infinite loops in while validation

   • Forgot to update variable inside loop
   • Loop condition never becomes false

2. Wrong bracket types

   • Using () or {} instead of [] for arrays
   • Using [] instead of () for method calls

3. Forgetting Number() conversion

   • prompt() returns string, not number
   • Array index auto-converts, but unclear

4. Not storing forEach parameter correctly

   • forEach((index, drink)) ❌ (wrong order!)
   • forEach((drink, index)) ✅ (element first)

5. Calling function immediately in onclick

   • onclick="change()" vs change in addEventListener

Assessment Rubric

Total: 100%

Extension Challenges

1. Add more array methods (shift, unshift, splice)
2. Create remove() function to delete by index
3. Sort drinks alphabetically
4. Search for specific drink
5. Display drinks in HTML list (not just console)

🎨 Challenge 2: DOM Manipulation

Location: debugging-challenge-questions/Challenge-2-DOM Manipulation/

Learning Objectives

• Select elements with querySelector()
• Create elements with createElement()
• Add elements with appendChild()
• Remove elements with remove()
• Style elements with classList

Solution Highlights

Part A: Add List Item

const ul = document.querySelector("ul");
const newli = document.createElement("li");
newli.textContent = "Giraffe";
ul.appendChild(newli);

Teaching Points:

• 4-step process: SELECT, CREATE, CONFIGURE, APPEND
• textContent vs innerHTML (security)
• appendChild() vs append() (newer method)
• Always validate parent exists

Part B: Remove Element

const h2 = document.querySelector("#heading2");
h2.remove();

Teaching Points:

• # for ID selectors
• Check if element exists before removing
• remove() vs removeChild() (modern vs old)
• Element is gone from DOM completely

Part C: Add Classes

const style = document.querySelector("#style");
style.classList.add("bg-warning");
style.classList.add("m-5");

Teaching Points:

• classList vs className (modern vs old)
• Can add multiple classes separately
• Doesn't overwrite existing classes
• Bootstrap utility classes

Common Student Mistakes

1. Wrong selector syntax

   • querySelector("heading2") ❌ (missing #)
   • querySelector("#heading2") ✅

2. Creating wrong element

   • createElement("list") ❌ (no such tag)
   • createElement("li") ✅

3. Forgetting parentheses

   • h2.remove ❌ (references method)
   • h2.remove() ✅ (calls method)

4. Adding multiple classes wrong

   • classList.add("bg-warning m-5") ❌ (treats as one class with space!)
   • classList.add("bg-warning", "m-5") ✅ (separate arguments)

5. Not checking if element exists

   • Leads to "Cannot read property of null" errors
   • Always use if (element) { ... }

Assessment Rubric

Total: 100%

Extension Challenges

1. Add multiple list items in a loop
2. Remove all items except first
3. Toggle classes on button click
4. Create elements from array data
5. Implement undo functionality (restore removed elements)

👤 Challenge 3: Object Properties and Value Modification

Location: debugging-challenge-questions/Challenge-3-Profile Object/

Learning Objectives

• Create objects with literal syntax
• Access properties with dot notation
• Modify property values
• Change property data types
• Understand const with object mutation

Solution Highlights

Part A: Create Object

const profile = {
    name: "Maya",
    gender: "Female",
    age: 14,
    school: "Telebort"
};

Teaching Points:

• Curly braces {} for objects
• Key-value pairs with colons :
• Commas between properties
• Use const (prevents reassignment, allows mutation)

Part B: Modify Property

profile.school = ["ABC Primary School", "XYZ Secondary School", "Telebort"];

Teaching Points:

• Can change property TYPE (string -> array)
• Modification works with const objects
• Property access with dot notation
• JavaScript's dynamic typing

Common Student Mistakes

1. Wrong bracket type

   • const profile = [name: "Maya"] ❌ (square brackets)
   • const profile = {name: "Maya"} ✅ (curly braces)

2. Missing commas

   • Properties must be separated by commas
   • Trailing comma after last property is OK in modern JS

3. Using assignment operator

   • {name = "Maya"} ❌ (equals sign)
   • {name: "Maya"} ✅ (colon)

4. Trying to reassign const

   • profile = {...} ❌ (can't reassign const)
   • profile.school = ... ✅ (can mutate properties)

5. Wrong property name

   • profile.schools = [...] ❌ (creates NEW property)
   • profile.school = [...] ✅ (modifies EXISTING)

Why const Works with Object Modification

// ALLOWED (mutation):
const obj = { name: "Alice" };
obj.name = "Bob";        ✅ // Change property
obj.age = 25;            ✅ // Add property
delete obj.name;         ✅ // Remove property

// NOT ALLOWED (reassignment):
obj = { name: "Bob" };   ❌ // TypeError!

Explanation: const locks the variable binding, not the object contents!

Assessment Rubric

Total: 100%

Extension Challenges

1. Add more properties (hobbies, favorites)
2. Create nested objects (address, contact)
3. Create array of profiles (multiple students)
4. Add methods to object (getFullName, updateAge)
5. Serialize to JSON (JSON.stringify())

🎯 Challenge 4: Event Handling - Mouse and Click Events

Location: debugging-challenge-questions/Challenge-4-Button/

Learning Objectives

• Select elements for event handling
• Attach event listeners with addEventListener()
• Handle mouse events (mouseover, mouseout)
• Handle click events
• Use arrow functions for event handlers
• Manipulate classes with classList.replace()

Solution Highlights

Part A: Button Selection

const button = document.querySelector('button');

Teaching Points:

• Store element reference in variable
• Check if element exists before using
• Script placement matters (end of body)

Part B: Hover Effects

button.addEventListener('mouseover', () => {
    button.classList.replace('btn-light', 'btn-warning');
});

button.addEventListener('mouseout', () => {
    button.classList.replace('btn-warning', 'btn-light');
});

Teaching Points:

• addEventListener() syntax
• Arrow function callbacks
• Multiple listeners on same element
• classList.replace() vs add()/remove()
• Mouse event types

Part C: Click Event

button.addEventListener('click', () => {
    alert('I love Telebort!');
});

Teaching Points:

• Same element, different event type
• Listeners don't interfere with each other
• Alert is blocking (pauses execution)
• Can have multiple click handlers

Common Student Mistakes

1. Wrong event name

   • addEventListener('onmouseover', ...) ❌ (don't use "on" prefix)
   • addEventListener('mouseover', ...) ✅

2. Calling function immediately

   • addEventListener('click', alert('Hi')) ❌ (calls immediately!)
   • addEventListener('click', () => alert('Hi')) ✅ (callback)

3. Wrong classList method

   • classList.add('btn-warning') ⚠️ (doesn't remove old class)
   • classList.replace('btn-light', 'btn-warning') ✅ (swaps)

4. Forgetting quotes

   • addEventListener(click, ...) ❌ (undefined variable)
   • addEventListener('click', ...) ✅ (string)

5. Script runs before HTML loads

   • Solution: Put <script> at end of <body>
   • Or use DOMContentLoaded event
   • Or use defer attribute

addEventListener vs onclick

Assessment Rubric

Total: 100%

Extension Challenges

1. Add more event types (dblclick, contextmenu)
2. Count clicks and display number
3. Disable button after first click
4. Add keyboard support (Enter key)
5. Create custom tooltip on hover
6. Animate button with CSS classes
7. Log event details (coordinates, timestamp)

🎓 Instructor Teaching Guide

Pre-Activity Setup

1. Review Prerequisites:

   • Students should know: variables, data types, basic functions
   • Covered in: Concepts 1-10

2. Set Expectations:

   • 4 independent challenges
   • Work in separate folders
   • Test each challenge before moving on
   • Use F12 console for debugging

3. Common Questions:

   • "Can I use different names?" -> Yes, but explain naming choices
   • "Do I need all the validation?" -> Basic version first, then enhance
   • "What if I get stuck?" -> Use console.log(), check for errors in F12

During Activity

1. Monitor Progress:

   • Check console for errors
   • Look for common mistakes (listed in each challenge)
   • Help debug, don't give answers immediately

2. Encourage Best Practices:

   • Console logging for debugging
   • Descriptive variable names
   • Code comments explaining logic
   • Testing edge cases

3. Differentiation:

   • Struggling students: Provide starter code, work through one example
   • Advanced students: Assign extension challenges
   • Visual learners: Draw DOM tree, event flow diagrams

Post-Activity Review

1. Whole Class Discussion:

   • What was most challenging?
   • Favorite "aha!" moment?
   • How do these concepts connect to real projects?

2. Common Misconceptions:

   • Arrays vs objects (when to use each)
   • const with objects (mutation vs reassignment)
   • Event bubbling (why events propagate)
   • querySelector vs querySelectorAll

3. Real-World Applications:

   • Challenge One: Shopping cart, todo list
   • Challenge 2: Dynamic content loading, single-page apps
   • Challenge 3: User profiles, settings
   • Challenge 4: Interactive UI, button states

📊 Assessment Strategy

Formative Assessment (During Activity)

• Observe: Student code in real-time
• Ask: "Why did you choose this approach?"
• Check: Console for errors, visual results
• Note: Who needs extra support, who's ready for extensions

Summative Assessment (After Activity)

1. Code Review Checklist:

   • ✅ Functionality works as specified
   • ✅ Code follows best practices
   • ✅ Console logs demonstrate understanding
   • ✅ Error handling implemented (bonus)

2. Rubric Scoring:

   • Use individual challenge rubrics (provided above)
   • Weight: 70% functionality, 20% code quality, 10% bonus
   • Convert to letter grade or points

3. Peer Review:

   • Students swap code and test each other's
   • Provide constructive feedback form
   • Discuss different implementation approaches

Feedback Templates

For Struggling Students:

"Great effort! I see you got [specific part] working. Let's focus on [problem area]. Try adding console.log() to see what's happening at each step."

For Proficient Students:

"Excellent work! All challenges complete and working. Your code is clean and well-commented. Consider trying [extension challenge] to deepen your understanding."

For Advanced Students:

"Outstanding! You've mastered all challenges and added validation. I'm impressed by [specific feature]. Next, explore [advanced topic] to prepare for upcoming projects."

🐛 Debugging Guide for Instructors

Challenge 1 Issues

Challenge 2 Issues

Challenge 3 Issues

Challenge 4 Issues

🚀 Extension Activities

For Fast Finishers

1. Combine Challenges:

   • Create profile object for each drink in Challenge 1
   • Display drinks as DOM elements instead of console
   • Add buttons to each list item for deletion

2. Enhance Functionality:

   • Add undo/redo for array changes
   • Implement drag-and-drop for list items
   • Create animated transitions for hover effects
   • Build form to edit profile object

3. New Features:

   • Local storage persistence
   • Search/filter functionality
   • Sort options (alphabetical, custom)
   • Export data as JSON

Project Ideas Using These Skills

1. Todo List App (Arrays + DOM + Events)
2. Profile Card Generator (Objects + DOM + Events)
3. Interactive Quiz (Arrays + Objects + Events)
4. Shopping Cart (Arrays + Objects + DOM + Events)
5. Contact Form (Objects + DOM + Events + Validation)

📚 Related Resources

For Students

• MDN Web Docs: Arrays
• MDN Web Docs: DOM Manipulation
• MDN Web Docs: Events
• MDN Web Docs: Objects

For Instructors

• JavaScript.info - Detailed explanations
• Eloquent JavaScript - Free book
• W3Schools - Quick reference
• CSS-Tricks - DOM and Events articles

✅ Solution Verification Checklist

Before sharing solutions with students, verify:

• All 4 challenges have complete solutions
• Each challenge includes HTML and JavaScript files
• Console logs demonstrate each step
• Visual results match expected outcomes
• Code includes teaching comments
• Common mistakes are documented
• Assessment rubrics are clear
• Extension challenges are provided
• Files follow naming conventions
• Solutions tested in multiple browsers

📝 Version History

v1.0 - Initial complete solution

• All 4 challenges implemented
• Comprehensive teaching comments
• Assessment rubrics included
• Extension challenges provided
• Instructor guide completed

💡 Tips for Using This Template Solution

1. Don't Share Immediately:

   • Let students struggle and learn
   • Use as reference for helping stuck students
   • Share after activity completion for self-assessment

2. Adapt to Your Class:

   • Adjust difficulty based on student level
   • Skip advanced validation for beginners
   • Add more extensions for advanced classes

3. Use for Professional Development:

   • Review teaching comments for explanation ideas
   • Study common mistakes to anticipate issues
   • Use assessment rubrics as grading guides

4. Encourage Different Approaches:

   • This is ONE correct solution, not the ONLY one
   • Students may have different but valid approaches
   • Discuss trade-offs of different implementations

Activity 12 | W2 Advanced JavaScript Foundations | 55 minutes

Template Solution Created: 2024 For Use By: Telebort Instructors Aligned With: W2 Course Learning Objectives