Activity 06: Functions - Complete Solution

📋 Overview

This is the INSTRUCTOR'S COMPLETE SOLUTION for W2 Activity 06: Functions. This solution demonstrates all 4 exercises with comprehensive teaching comments, common mistake documentation, and detailed instructor notes.

✅ Implementation Status

All Exercises Complete:

• ✓ Exercise One: Mathematical Calculator Functions (4 functions)
• ✓ Exercise 2: Button with Function Call (onclick event)
• ✓ Exercise 3: Random Dice Generator (Math.random)
• ✓ Exercise 4: Restaurant Ordering System (multi-function system)

🎯 Learning Objectives Demonstrated

Function Fundamentals

• Function declaration syntax: function name(params) { }
• Parameters and arguments
• Return statements and return values
• Function invocation/calling
• Function composition (functions calling functions)

JavaScript Concepts

• Global vs local variable scope
• Type conversion with + operator
• Math.random() and Math.floor()
• Conditional logic within functions
• State management with global variables

DOM & Events

• onclick event handlers in HTML
• Connecting HTML buttons to JavaScript functions
• User interaction with functions
• Dynamic content updates

System Design

• Multi-function architecture
• Separation of concerns
• Pure vs impure functions
• State mutation and tracking

🚀 Quick Start

Prerequisites

• Node.js installed (v12 or higher)
• Basic understanding of JavaScript

Setup Instructions

# Navigate to solution folder
cd "Paid Courses/W2 Advanced JavaScript Foundations/Template Solution/activity-06-functions"

# Run setup script
chmod +x setup.sh
./setup.sh

# Start the development server
npm start

The activity will:

1. Open automatically in your default browser at http://localhost:8080
2. Prompt for numbers in Exercise 1 (console logs results)
3. Display buttons for Exercises 2, 3, and 4
4. Log detailed execution information to console

Manual Testing

Open index.html in any modern browser:

• Chrome, Firefox, Safari, Edge all supported
• Press F12 to view console logs and detailed execution traces
• Refresh page (Cmd/Ctrl + R) to restart

📊 Exercise Details

Exercise One: Mathematical Calculator Functions

Learning Focus: Basic function syntax, parameters, return values

Functions Implemented:

addition(x, y)   // Returns x + y
subtract(x, y)   // Returns x - y
multiply(x, y)   // Returns x * y
divide(x, y)     // Returns x / y

Key Teaching Points:

• Function declaration syntax
• Parameters vs arguments
• Return statements (why needed)
• Type conversion with +prompt()
• Console logging for verification

Test Cases:

Common Student Mistakes:

1. Forgetting return statement -> function returns undefined
2. Not converting prompt to number -> string concatenation instead of math
3. Using wrong variable names in function body
4. Calling function without parentheses
5. Passing wrong number of arguments

Exercise 2: Button with Function Call

Learning Focus: Global variables, onclick events, HTML-JS connection

Implementation:

var myWords = "Hello World";  // Global variable

function echo() {              // No parameters
    alert(myWords);            // Accesses global
}

HTML Required:

<button onclick="echo()">Echo</button>

Key Teaching Points:

• Global vs local variable scope
• onclick event handler syntax
• Function calls from HTML
• Variable persistence
• Functions without parameters

Expected Behavior:

• Button labeled "Echo" appears on page
• Clicking button triggers echo() function
• Alert displays "Hello World"
• Can click multiple times, same result

Common Student Mistakes:

1. Missing () in onclick: onclick="echo" -> doesn't call function
2. Declaring variable inside function -> becomes local, not global
3. Quote mismatches in HTML onclick attribute
4. Trying to access variable before declaring it
5. Wrong event name: click instead of onclick

Exercise 3: Random Dice Generator

Learning Focus: Math.random(), number generation, pure randomness

Implementation:

function random() {
    var diceRoll = Math.floor(Math.random() * 6) + 1;
    alert("🎲 You rolled: " + diceRoll);
}

HTML Required:

<button onclick="random()">Roll Dice 🎲</button>

Key Teaching Points:

• Math.random() returns 0 to 0.999...
• Scaling random numbers: multiply by range
• Rounding with Math.floor()
• Why add 1 (shift from 0-5 to 1-6)
• Random number distribution

Random Number Formula Breakdown:

Step 1: Math.random()           → 0.0000 to 0.9999...
Step 2: Math.random() * 6       → 0.0000 to 5.9999...
Step 3: Math.floor(...)         → 0, 1, 2, 3, 4, or 5
Step 4: ... + 1                 → 1, 2, 3, 4, 5, or 6 ✅

Expected Behavior:

• Button labeled "Roll Dice 🎲" appears
• Each click generates new random number 1-6
• Distribution should be even over many rolls
• Never shows 0 or 7

Common Student Mistakes:

1. Forgetting + 1 -> returns 0-5 instead of 1-6
2. Using Math.round() -> can return 0 or 7
3. Wrong parentheses placement -> always returns 1
4. Using Math.ceil() without understanding distribution
5. Not storing result -> calculates but doesn't display

Verification Test: Roll 60 times, should see all numbers 1-6 appear multiple times with roughly even distribution.

Exercise 4: Restaurant Ordering System

Learning Focus: Multi-function systems, state management, function composition

Global State:

var myMoney = 50;  // Starting balance

Functions Implemented:

order(food)        // Routes food to payment system
balance(price)     // Calculates remaining money (pure function)
pay(food, price)   // Processes transaction, updates state

Menu Items:

• Chicken Chop: RM12
• Fish and Chips: RM14
• Pasta: RM16

HTML Required:

<button onclick="order('Chicken Chop')">Chicken Chop RM12</button>
<button onclick="order('Fish and Chips')">Fish and Chips RM14</button>
<button onclick="order('Pasta')">Pasta RM16</button>

System Architecture:

User clicks button
    ↓
order(food) determines price
    ↓
pay(food, price) checks balance
    ↓
balance(price) calculates remaining money
    ↓
If affordable: Update myMoney, log success
If not: Keep myMoney same, log error

Key Teaching Points:

• Function composition (functions calling functions)
• Pure functions (balance) vs impure (pay)
• State management with global variables
• Conditional logic in functions
• String comparison with ===

Transaction Flow Example:

Starting balance: RM50

Transaction 1: Order Chicken Chop (RM12)

• order("Chicken Chop") called
• Matches condition -> pay("Chicken Chop", 12)
• balance(12) returns 38
• ``38 >= 0`` -> Affordable ✅
• myMoney = 38
• Logs: "You have ordered the Chicken Chop. You have RM38 left."

Transaction 2: Order Fish and Chips (RM14)

• pay("Fish and Chips", 14)
• balance(14) returns 24
• ``24 >= 0`` -> Affordable ✅
• myMoney = 24
• Logs: "You have ordered the Fish and Chips. You have RM24 left."

Transaction 3: Order Pasta (RM16)

• pay("Pasta", 16)
• balance(16) returns 8
• ``8 >= 0`` -> Affordable ✅
• myMoney = 8
• Logs: "You have ordered the Pasta. You have RM8 left."

Transaction 4: Order Chicken Chop (RM12) - FAILS

• pay("Chicken Chop", 12)
• balance(12) returns -4
• -`4 < 0` -> Not affordable ❌
• myMoney stays 8 (unchanged)
• Logs: "Oops, you don't have enough money!"

Common Student Mistakes:

1. Not updating myMoney after purchase -> infinite money glitch
2. Wrong conditional: balance(price) > 0 instead of >= 0
3. String comparison case mismatch: "chicken chop" vs "Chicken Chop"
4. Forgetting to pass price to pay() function
5. Using = (assignment) instead of === (comparison)
6. Quote errors in HTML onclick with string arguments
7. Checking balance AFTER deducting instead of BEFORE

🎓 Teaching Notes

Common Struggles Across All Exercises

One. Function Syntax Confusion

Problem: Students mix up syntax from different languages

// ❌ WRONG - Python syntax
def addition(x, y):
    return x + y

// ✅ CORRECT - JavaScript syntax
function addition(x, y) {
    return x + y;
}

2. Return Statement Omission

Problem: Calculating but not returning

// ❌ WRONG
function addition(x, y) {
    x + y;  // Calculates but doesn't return
}
console.log(addition(5, 3));  // undefined

// ✅ CORRECT
function addition(x, y) {
    return x + y;  // Returns the result
}
console.log(addition(5, 3));  // 8

3. Type Conversion Errors

Problem: prompt() returns string, not number

// ❌ WRONG
var x = prompt("Number:");     // "5" (string)
var y = prompt("Number:");     // "3" (string)
console.log(addition(x, y));   // "53" (concatenation!)

// ✅ CORRECT - Method 1
var x = Number(prompt("Number:"));  // 5 (number)
var y = Number(prompt("Number:"));  // 3 (number)

// ✅ CORRECT - Method 2 (shorthand)
var x = +prompt("Number:");    // 5 (number)
var y = +prompt("Number:");    // 3 (number)
console.log(addition(x, y));   // 8 (addition!)

4. onclick Event Errors

Problem: Missing parentheses or quote issues

<!-- ❌ WRONG - Missing () -->
<button onclick="echo">Echo</button>

<!-- ❌ WRONG - Quote mismatch -->
<button onclick="order("Pasta")">Pasta</button>

<!-- ✅ CORRECT -->
<button onclick="echo()">Echo</button>

<!-- ✅ CORRECT - Single quotes inside double -->
<button onclick="order('Pasta')">Pasta</button>

5. Scope Confusion

Problem: Variables declared in wrong scope

// ❌ WRONG - Variable is local, not global
function echo() {
    var myWords = "Hello";  // Only exists inside function
    alert(myWords);
}
// myWords is not accessible outside echo()

// ✅ CORRECT - Variable is global
var myWords = "Hello";  // Exists everywhere
function echo() {
    alert(myWords);     // Can access global
}

Teaching Progression

Week One: Exercises 1-2

• Day One: Function syntax, parameters, return statements (Exercise 1)
• Day 2: Global variables, onclick events (Exercise 2)
• Practice: Students create simple functions with different operations

Week 2: Exercises 3-4

• Day 3: Math.random(), number generation (Exercise 3)
• Day 4: Multi-function systems (Exercise 4)
• Day 5: Review, debugging, extensions

Live Coding Demonstration

Recommended Flow:

1. Exercise One: Code together, explaining each step
2. Exercise 2: Demonstrate, then let students try
3. Exercise 3: Let students attempt first, review together
4. Exercise 4: Break into parts, build incrementally

Exercise 4 Breakdown:

1. Start with just myMoney and balance() function
2. Add pay() function with simple logic
3. Add order() function with one menu item
4. Expand to all three menu items
5. Add error handling and logging

Discussion Points

Why Use Functions?

• Reusability: Write once, use many times
• Organization: Group related code
• Abstraction: Hide complexity
• Maintainability: Fix in one place
• Testability: Test each function independently

Return vs console.log?

// RETURN - Gives value back (can use it)
function add(a, b) {
    return a + b;
}
var sum = add(5, 3);  // sum = 8, can use it!

// CONSOLE.LOG - Just displays (can't use)
function add(a, b) {
    console.log(a + b);
}
var sum = add(5, 3);  // sum = undefined, can't use!

Pure vs Impure Functions?

// PURE - No side effects, same input = same output
function balance(price) {
    return myMoney - price;  // Doesn't change myMoney
}

// IMPURE - Modifies state, has side effects
function pay(food, price) {
    myMoney = balance(price);  // Changes myMoney
    console.log("Paid!");       // Side effect (logging)
}

🔧 Code Structure

File Organization

activity-06-functions/
├── index.html          # HTML with buttons for Exercises 2, 3, 4
├── script.js           # Complete solution with teaching comments
├── package.json        # Project dependencies
├── setup.sh           # Setup automation script
└── README.md          # This file (instructor guide)

script.js Sections

1. Exercise 1: Mathematical calculator (lines 24-181)
2. Exercise 2: Button onclick (lines 183-295)
3. Exercise 3: Random dice (lines 297-427)
4. Exercise 4: Restaurant system (lines 429-651)
5. Completion Summary: Console output (lines 653-690)

Each section includes:

• 🎯 Teaching point explanation
• ✅ Complete solution code
• 🎓 Instructor notes with common mistakes
• 💡 Discussion points
• ⚠️ Edge cases and warnings

🎨 Extension Challenges

Challenge One: Calculator Enhancements (Easy)

Add more operations to Exercise One:

function modulo(x, y) {
    return x % y;  // Remainder after division
}

function power(x, y) {
    return Math.pow(x, y);  // x to the power of y
}

function squareRoot(x) {
    return Math.sqrt(x);  // Square root of x
}

HTML:

<button onclick="console.log(modulo(x, y))">Modulo</button>
<button onclick="console.log(power(x, y))">Power</button>
<button onclick="console.log(squareRoot(x))">√ of X</button>

Challenge 2: Dice Variations (Easy-Medium)

Create different dice types:

function rollD4() {
    return Math.floor(Math.random() * 4) + 1;  // 1-4
}

function rollD8() {
    return Math.floor(Math.random() * 8) + 1;  // 1-8
}

function rollD20() {
    return Math.floor(Math.random() * 20) + 1;  // 1-20
}

function rollMultiple(numDice, sides) {
    var total = 0;
    for (var i = 0; i < numDice; i++) {
        total += Math.floor(Math.random() * sides) + 1;
    }
    return total;
}

// Roll 2d6 (two 6-sided dice)
alert("2d6: " + rollMultiple(2, 6));

Challenge 3: Restaurant Upgrades (Medium)

Add more features to the restaurant:

// Add money function
function addMoney(amount) {
    myMoney += amount;
    console.log("Added RM" + amount + ". New balance: RM" + myMoney);
}

// Order history tracking
var orderHistory = [];

function pay(food, price) {
    if (balance(price) >= 0) {
        myMoney = balance(price);
        orderHistory.push(food);
        console.log("Order history: " + orderHistory.join(", "));
        console.log("Total items ordered: " + orderHistory.length);
    }
}

// Tax calculation
function calculateTax(price) {
    return price * 0.06;  // 6% tax
}

function payWithTax(food, price) {
    var tax = calculateTax(price);
    var total = price + tax;
    if (balance(total) >= 0) {
        myMoney = balance(total);
        console.log("Food: RM" + price + ", Tax: RM" + tax.toFixed(2) +
                    ", Total: RM" + total.toFixed(2));
    }
}

Challenge 4: Visual Dice (Medium)

Use Unicode dice faces:

var diceFaces = {
    1: "⚀",
    2: "⚁",
    3: "⚂",
    4: "⚃",
    5: "⚄",
    6: "⚅"
};

function randomVisual() {
    var roll = Math.floor(Math.random() * 6) + 1;
    alert("You rolled: " + diceFaces[roll] + " (" + roll + ")");
}

Challenge 5: Complete System Integration (Hard)

Combine all concepts into a mini-game:

// Game state
var playerMoney = 100;
var playerInventory = [];
var rollCount = 0;

// Shop menu
var shopItems = {
    "Health Potion": 10,
    "Magic Scroll": 15,
    "Lucky Charm": 20
};

// Purchase item
function buyItem(item) {
    var price = shopItems[item];
    if (playerMoney >= price) {
        playerMoney -= price;
        playerInventory.push(item);
        console.log("Bought " + item + "! Remaining: $" + playerMoney);
    } else {
        console.log("Not enough money!");
    }
}

// Roll for loot
function rollForLoot() {
    rollCount++;
    var loot = Math.floor(Math.random() * 20) + 1;
    playerMoney += loot;
    console.log("Roll #" + rollCount + ": Found $" + loot +
                " (Total: $" + playerMoney + ")");
}

// Show stats
function showStats() {
    console.log("=== PLAYER STATS ===");
    console.log("Money: $" + playerMoney);
    console.log("Items: " + (playerInventory.length || "None"));
    console.log("Rolls: " + rollCount);
}

📚 Assessment Rubric

Exercise One: Mathematical Functions (25 points)

• All 4 functions declared correctly (10 pts)
  • addition(x, y) returns x + y
  • subtract(x, y) returns x - y
  • multiply(x, y) returns x * y
  • divide(x, y) returns x / y
• Parameters and return statements correct (8 pts)
• User input with + conversion (4 pts)
• Results logged to console (3 pts)

Exercise 2: Button onclick (20 points)

• Global variable myWords declared (5 pts)
• echo() function works correctly (8 pts)
• HTML button with onclick event (7 pts)

Exercise 3: Random Dice (20 points)

• random() function declared (5 pts)
• Correct Math.random() formula (1-6) (10 pts)
• HTML button with onclick event (5 pts)

Exercise 4: Restaurant System (30 points)

• myMoney global variable initialized to 50 (3 pts)
• order(food) function with if/else logic (7 pts)
• balance(price) calculation function (5 pts)
• pay(food, price) transaction logic (10 pts)
  • Checks if affordable
  • Updates myMoney when successful
  • Shows error when insufficient funds
• All 3 HTML menu buttons (5 pts)

Code Quality (5 points)

• Proper function naming (camelCase) (2 pts)
• Code comments explaining logic (2 pts)
• Follows all instructions (1 pt)

Total: 100 points

Grading Scale

• 90-100: Excellent (A) - All exercises work perfectly, clean code
• 80-89: Good (B) - Minor issues, mostly working correctly
• 70-79: Satisfactory (C) - Some functions work, others need fixes
• 60-69: Needs Improvement (D) - Significant issues present
• Below 60: Incomplete (F) - Major functionality missing

Partial Credit Guidelines

Exercise 1 (25 pts):

• Each working function: 2.5 pts (out of 10)
• Correct syntax but wrong logic: 1 pt per function
• Missing return statement: -2 pts per function
• Not converting prompt to number: -4 pts

Exercise 2 (20 pts):

• Global variable declared but wrong: 3 pts (out of 5)
• Function declared but doesn't work: 4 pts (out of 8)
• HTML button missing onclick: 3 pts (out of 7)

Exercise 3 (20 pts):

• Wrong formula (0-5 instead of 1-6): 6 pts (out of 10)
• Using Math.round instead of Math.floor: 8 pts (out of 10)
• Missing alert/display: -3 pts

Exercise 4 (30 pts):

• balance() function but wrong logic: 3 pts (out of 5)
• pay() doesn't update myMoney: -5 pts
• order() missing else if structure: -3 pts
• Only 1-2 menu items working: 2-3 pts (out of 5)

🐛 Troubleshooting

Issue: Functions Not Running

Symptoms:

• Clicking buttons does nothing
• No console output
• No errors in console

Debugging Steps:

1. Open browser console (F12)
2. Check for syntax errors (red text)
3. Verify script.js is linked in index.html
4. Ensure files are in same directory
5. Try different browser (Chrome recommended)
6. Check onclick spelling in HTML

Common Causes:

• Missing <script src="script.js"></script> in HTML
• Typo in function name: echo() in JS but eko() in HTML
• Script tag in <head> instead of before </body>

Issue: Exercise 1 Shows "NaN" or Wrong Results

Symptoms:

• Console shows NaN instead of numbers
• Addition shows "53" instead of 8 (for 5+3)

Debugging Steps:

// Add these logs to debug
console.log("x:", x, "Type:", typeof x);
console.log("y:", y, "Type:", typeof y);

Solution: Ensure + conversion before prompt:

// ❌ WRONG
var x = prompt("Number:");  // Returns string

// ✅ CORRECT
var x = +prompt("Number:");  // Converts to number

Issue: Exercise 3 Shows 0 or 7

Symptoms:

• Dice shows 0 sometimes
• Dice shows 7 sometimes
• Numbers outside 1-6 range

Debugging Steps:

function random() {
    var step1 = Math.random();
    var step2 = step1 * 6;
    var step3 = Math.floor(step2);
    var step4 = step3 + 1;
    console.log("Steps:", step1, step2, step3, step4);
    alert(step4);
}

Common Causes:

• Forgot + 1: Math.floor(Math.random() * 6) -> 0-5
• Used Math.round: Can return 0 or 7
• Wrong parentheses: Math.floor(Math.random()) * 6 + 1

Solution:

var diceRoll = Math.floor(Math.random() * 6) + 1;  // 1-6

Issue: Exercise 4 Infinite Money

Symptoms:

• Can buy everything without money decreasing
• myMoney stays at 50

Debugging Steps:

function pay(food, price) {
    console.log("Before:", myMoney);
    if (balance(price) >= 0) {
        myMoney = balance(price);
        console.log("After:", myMoney);  // Should be different!
    }
}

Common Cause: Missing the myMoney = balance(price); update line

Solution:

function pay(food, price) {
    if (balance(price) >= 0) {
        myMoney = balance(price);  // MUST UPDATE!
        console.log("You have ordered the " + food);
    }
}

Issue: Exercise 4 Always Says "No Money"

Symptoms:

• First order fails even with RM50
• Can't buy anything

Debugging Steps:

console.log("Price:", price);
console.log("Balance:", balance(price));
console.log("Check:", balance(price) < 0);

Common Causes:

1. Wrong comparison operator: > instead of >=
2. Checking > 0 instead of < 0
3. Using && instead of condition check

Solution:

if (balance(price) < 0) {      // If WOULD BE negative
    console.log("No money");   // Reject
} else {                       // If >= 0
    myMoney = balance(price);  // Accept
}

🔍 Code Review Checklist

Use this checklist when reviewing student submissions:

Exercise One: Mathematical Functions

• All 4 functions declared with correct names
• Each function has 2 parameters (x, y)
• Each function has return statement
• Correct operators: +, -, *, /
• User input uses +prompt() or Number(prompt())
• Variables named x and y (or similar)
• Results logged to console with console.log()
• Functions actually called (not just declared)

Exercise 2: Button onclick

• myWords declared as global variable (outside functions)
• myWords initialized to "Hello World"
• echo() function declared
• echo() uses alert() to display
• echo() accesses global myWords variable
• HTML button exists with proper syntax
• onclick attribute includes (): onclick="echo()"
• Clicking button shows alert

Exercise 3: Random Dice

• random() function declared
• Uses Math.random()
• Uses Math.floor()
• Formula multiplies by 6
• Formula adds 1
• Parentheses correct: Math.floor(Math.random() * 6) + 1
• Result displayed with alert()
• HTML button with onclick event
• Returns values 1-6 only (test multiple times)

Exercise 4: Restaurant System

• myMoney global variable initialized to 50
• balance(price) function declared
• balance() returns myMoney - price
• pay(food, price) function declared
• pay() checks if balance(price) < 0
• pay() updates myMoney when affordable
• pay() shows error message when not affordable
• order(food) function declared
• order() has if/else if for all 3 foods
• Correct prices: Chicken Chop 12, Fish 14, Pasta 16
• order() calls pay() with correct arguments
• All 3 HTML buttons with onclick events
• Strings in onclick match exactly (case-sensitive)
• Transaction logs appropriate messages

Code Quality

• Proper indentation (consistent spacing)
• camelCase naming for variables and functions
• Meaningful variable names
• Code comments explaining logic
• No console errors
• Follows all instructions from activity

💡 Tips for Instructors

Live Coding Best Practices

Exercise One:

1. Start with explaining what functions do (reusable code blocks)
2. Write one function together (addition)
3. Break down: name, parameters, body, return
4. Test it with console.log
5. Let students write the other 3 functions
6. Review common mistakes together

Exercise 2:

1. Discuss global vs local scope first
2. Create the variable together
3. Write the function together
4. Test in console: echo() should work
5. Add HTML button together
6. Explain onclick event connection

Exercise 3:

1. Explain Math.random() with console tests
2. Show the formula step-by-step
3. Let students implement
4. Test multiple times to verify range
5. Discuss edge cases (why not 0 or 7)

Exercise 4:

1. Start with just myMoney and balance()
2. Add pay() with simple logic
3. Add order() with one item
4. Test the flow
5. Expand to all items
6. Add validation and error messages

Common Questions & Answers

Q: "Do parameters have to be named x and y?" A: No! They can be any valid variable name. We use x and y for simplicity, but num1 and num2 or first and second work too. Just be consistent inside the function body.

Q: "What's the difference between parameters and arguments?" A: Parameters are the placeholders in the function definition (function add(x, y)). Arguments are the actual values you pass when calling (add(5, 3)). Think: parameters = variables, arguments = values.

Q: "Why do we need return?" A: return gives the value back so you can use it! Without return, the function calculates but you can't save or use the result. console.log just displays, return gives back.

Q: "Can I use const/let instead of var?" A: Yes! In modern JavaScript, const and let are preferred. But for W2 beginner level, we use var for simplicity. Discuss scope differences if students ask.

Q: "Why + before prompt()?" A: The + is shorthand for converting to number. prompt() always returns a string. +prompt() converts "5" to 5. Alternative: Number(prompt()).

Q: "My dice shows decimals, not integers!" A: You're missing Math.floor(). Math.random() * 6 + 1 gives 1.0 to 6.999. Math.floor(Math.random() * 6) + 1 gives integers 1-6.

Q: "The restaurant lets me buy infinitely!" A: You forgot to update myMoney inside the pay() function. After checking affordability, add: myMoney = balance(price);

Q: "onclick doesn't work, button does nothing!" A: Check these:

1. Is there () after function name? onclick="echo()" not "echo"
2. Does function name match exactly? echo() in JS and echo() in HTML
3. For strings, are quotes correct? order('Pasta') with single quotes inside double
4. Is script.js linked in HTML?

Debugging Strategy for Students

Teach students this systematic approach:

1. Read the error message (if any in console)
2. Add console.logs to trace execution
3. Test in parts (one function at a time)
4. Check types (console.log(typeof variable))
5. Verify connections (HTML onclick to JS function name)
6. Compare to working example
7. Ask specific questions (not "it doesn't work")

Differentiation Strategies

For Struggling Students:

• Provide starter code with function signatures
• Let them complete one exercise well rather than rush all
• Pair programming with stronger student
• Focus on Exercises 1-2, skip 3-4
• More detailed pseudocode and comments

For Advanced Students:

• Require all extension challenges
• Refactor to use modern syntax (const, let, =>)
• Add comprehensive error handling
• Create calculator with GUI buttons
• Build complete game system combining all concepts

📖 Further Reading

JavaScript Functions

• MDN: Functions
• MDN: Function declarations
• MDN: Return statement

Math & Random

• MDN: Math.random()
• MDN: Math.floor()

Events

• MDN: onclick event
• MDN: Event handlers

Scope

• MDN: Variable scope
• JavaScript.info: Variable scope

📝 License

This solution is part of the Telebort W2 Advanced JavaScript Foundations course.

Copyright: Telebort Engineering Course: W2 Advanced JavaScript Foundations Activity: 06 - Functions Version: One.0.0 Last Updated: October 2024

Need Help? Contact the teaching team or check the course forum for additional support.