Debugging Help for a Unit 5 Hackathon Project

CS Principles
1

My student is creating an app to display NFL Team information for the U5 Hackathon Project.

What do you intend or expect to happen? As the user clicks on the Random Team button, the names of the team displays in the display at the top of the app, and the name of that team’s coach in the bottom display.

What is actually happening? As the user clicks on the Random Team button, the names of the teams are displaying, but the bottom display with the Coach’s name is not working every time. If the user continues to click on that button, eventually a name will appear.

What have you tried? My student has tried rearranging the order in the update screen function but is at a point he doesn’t know what to try next.

Any help would be much appreciated as always!!

2

Greetings @tcreager,

So I managed to solve the issues the program had, though for me most of how it was structured was very very confusing

TLDR; Link: https://studio.code.org/projects/applab/V_5XhI-3lttu-_08U90Xdl_yYEhhX_qBOal8XJjgyCw/view
if you don’t understand what I did here it may be best to read what I wrote below

Lets Start with listing the problems first

1: The random team generation has 2 calls for the event “randomTeamBtn”
2: The randomization is done twice in the event and on updateScreen
3: The index range is invalid when trying to find a random team
4: though it’s more of a nitpick you do not need to shuffle the array if your just selecting 1 element

Let’s try to solve these issues

  • The first one should be easy look for both of these events and delete 1 of them,

  • The second & third issue is basically where your main problem lies… so I’ll try my best to explain what your current one is doing now
    /
    When random team is pressed

→ put a random team in every index from a range 1 - 32 [Includes nextTeam nextCoach… etc] (flaw: team length is 32 but it’s last index is 31, flaw: will not contain all teams since a random one is chosen by chance every time)

→ call updateScreen() which also selects from a random range of integers from 1 - team.length and then updates a team with the given information which also has one major problem, unlike with randomTeamBtn this one updates through how big the original team was rather than the actual variable your looking at,
EX: “getting takeout without ordering first and expecting it to be ready”
/
To solve this simply design a var that selects 1 random number within the original teams indices and then references the original variable to retrieve the necessary data I’ll post an example below to showcase

onEvent("randomTeamBtn", "click", function () {
  var select = randomNumber(0, team.length-1);
  nextTeam = team[select];
  nextCoach = headCoach[select];
  nextStadium = stadiumCapacity[select];
  nextPhoto = photos[select];
  updateScreen();
});

by doing this you’ll have all you need to update the display as needed I’ll provide it anyways since I’m sure you don’t want to spend more time figuring that out

function updateScreen() {
  setText("teamOutput", nextTeam);
  setText("coachOutput", nextCoach);
  setText("stadiumLimitOutput", nextStadium);
  setProperty("teamImgOutput", "image", nextPhoto);
}

Oh, your still reading this far… well this is optional but might i suggest making your random team an object? it’s a bit of a nitpick i know but best to start good habits early!

var randomTeam = {
  team: "",
  coach: "",
  stadium: 0,
  photo: ""
}

by doing this it’ll be much more readable and easier to see but that’s just my preference

I know it’s a lot but i hope this helps

2 Likes
3

Thank you so much for your help. My student instantly understood what he did wrong and so your explanation was spot on. Thank you again from my student and me!