Home HTML JavaScript DOM Data Types Javascript Debugging

College Board Big Idea 1

Identifying and Correcting Errors (Unit 1.4)

Become familiar with types of errors and strategies for fixing them

  • Review CollegeBoard videos and take notes on blog
  • Complete assigned MCQ questions if applicable

Code Segments

Practice fixing the following code segments!

Segment 1: Alphabet List

Intended behavior: create a list of characters from the string contained in the variable alphabet

Code:

%%html

<script>
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = alphabet.split("");

console.log(alphabetList);
</script>

What I Changed

I changed…

  1. removed everything, and replaced it with a string.split method. It just converts the string to an array

Segment 2: Numbered Alphabet

Intended behavior: print the number of a given alphabet letter within the alphabet. For example:

"_" is letter number _ in the alphabet

Where the underscores (_) are replaced with the letter and the position of that letter within the alphabet (e.g. a=1, b=2, etc.)

Code:

%%html
<script>
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = alphabet.split("");

let letterNumber = 5

console.log(alphabetList[letterNumber-1]+" is letter number " + String(letterNumber) + "in the alphabet")

// Should output:
// "e" is letter number 5 in the alphabet
</script>

What I Changed

I changed…

  1. Don’t overcomplicate the way to search for a value in an array. the array starts at 0, so if you want the 5th value in the array you will be looking for the index of 5-1 or 4
  2. I removed the long for loop, and replaced it with a basic array value lookup “alphabetList[letterNumber-1]”

Segment 3: Odd Numbers

  • Intended behavior: print a list of all the odd numbers below 10
    • this currently just lists even numbers

Code:

%%html

<script>
let odds = [];
let i = 1;

while (i <= 10) {
  odds.push(i);
  i += 2;
}

console.log(odds);
</script>

What I Changed

I Stated 1 at 1, and renamed the array evens to odds

Finding Multiples of 2 and 5

The intended outcome is printing a number between 1 and 100 once, if it is a multiple of 2 or 5

  • What values are outputted incorrectly. Why?
    • any multiples of 10 (including 0) will be outputted twice becuase they are both a multiple of 2 and 5,
    • this can be fixed with 1 single word: “continue”
  • Make changes to get the intended outcome.
%%html

<script>
var newNumbers = []

for (let i=1; i<101; i++) {
    if (i % 5 === 0){
        newNumbers.push(i)
        continue; //super important single line, this makes sure that if it was already a multiple of 5 we don't care if its a multiple of 2
        }
    if (i % 2 === 0){
        newNumbers.push(i)
    }
}
console.log(newNumbers) 
</script>

What I Changed

I changed… 3 things:

  1. made the if statements look consisent with my style of code, I’m not actually sure if they were broken
  2. added a “continue;” in the if statement that checked if a number was was a multiple of 5, this was because once you know a value is an answer, you don’t need to check it twice.
  3. I removed the while loop, and made the for loop go through numbers between 1, 100

Challenge

This code segment is at a very early stage of implementation.

  • What are some ways to (user) error proof this code?
    1. Parse the order in a way that almost any way to write an input is accepted
    2. Allow multiple answers with commas
    3. run it as a button so you can change the answer at any time
    4. Remember to add .toFixed() when doing math with decimals, while the computer will do a pretty good job, there may be some small Floating Point Errors
  • The code should be able to calculate the cost of the meal of the user

Hint:

  • write a “single” test describing an expectation of the program of the program
  • test - input burger, expect output of burger price
  • run the test, which should fail because the program lacks that feature
  • write “just enough” code, the simplest possible, to make the test pass

Then repeat this process until you get program working like you want it to work.

%%html
<p><button onclick="OrderUp()">Press To Order</button></p>
<div>
    <p id="total">Total Cost:_</p>
</div>

<script>
var menu =  {"burger": 3.99, "fries": 1.99, "drink": 0.99, "strips": 3.59}
console.log(menu);

function OrderUp(){ //nestle code within the function so it can be called from the button

var total = 0; // will be final total

var options = "The Menu options are:"; //create text for the menu

for (var item in menu) {
    options += "\n"+ item + "  $" + menu[item].toFixed(2); //add a new line listing the next item
}

var order = prompt(options,"Burger, Fries"); //prompt for the order
order = order.trim(); //remove space from front and end
order = order.replaceAll(" ","") // remove spaces
var choices = order.toLowerCase().split(",");//split into an array at the commas

for (let i=0;i<choices.length;i++){
    if (menu[choices[i]]==null){continue}; // check if the choice exists, if not then move on
    total += menu[choices[i]]; //add to total
}

//code should add the price of the menu items selected by the user 
    document.getElementById("total").innerText = "Total Cost: $"+String(total.toFixed(2));
}
</script>

Total Cost:_

Hacks

  • Fix the errors in the first three segments in this notebook and say what you changed in the code cell under “What I Changed” (Challenge is optional)