Dropdown help for Hackathon

CS Principles Coding and Debugging Help
1

Firstly, thank you for reading this. I am a new CS teacher and never used block before (I’m also new at JS). I have several students trying to use the dropdown in their hackathon projects and we’re al stuck. Please help!!!

(Code.org - App Lab)

I am trying to get the dropdown in the Cat screen to populate the text boxes and images below from a filtered list

What actually happens: Nothing! Nada, so frustrating!!

What I’ve tried: I’ve tried several different things: update screen, set property, set text. nothing seems to work.

Current code is:

//These VAR will pull info from the original tables
var CatIDlist = [(getColumn(“Cats”, “id”))];
var CatWeightList = [(getColumn(“Cats”, “Maximum Weight”))];
var CatBreedList = [(getColumn(“Cats”, “Name”))];
var CatTempList = [(getColumn(“Cats”, “Temperament”))];
var CatImageList = [(getColumn(“Cats”, “Image”))];
var DogIDlist = [(getColumn(“Dogs”, “id”))];
var DogWeightList = [(getColumn(“Dogs”, “Maximum Weight”))];
var DogBreedList = [(getColumn(“Dogs”, “Name”))];
var DogTempList = [(getColumn(“Dogs”, “Temperament”))];
var DogImageList = [(getColumn(“Dogs”, “Image”))];

//FILTERING:
//These are EMPTY list into which the above VAR will be FILTERED
var FiltCatIDlist = ;
var SmallCatWeightList = ;
var BigCatWeightList = ;
var FiltCatBreedList = ;
var FiltCatTempList = ;
var FiltCatImageList = ;
var FiltDogIDlist = ;
var FiltDogWeightList = ;
var FiltDogBreedList = ;
var FiltDogTempList = ;
var FiltDogImageList = ;

var index = 0;
filter();

function filter() {
//Start with blank lists
FiltCatIDlist = ;
FiltCatWeightList = ;
FiltCatBreedList = ;
FiltCatTempList = ;
FiltCatImageList = ;
FiltDogIDlist = ;
FiltDogWeightList = ;
FiltDogBreedList = ;
FiltDogTempList = ;
FiltDogImageList = ;
for (var i = 0; i < CatIDlist.length - 1; i++) {
appendItem(FiltCatIDlist, CatIDlist[i]);
appendItem(FiltCatBreedList, CatBreedList[i]);
appendItem(FiltCatTempList, CatTempList[i]);
appendItem(FiltCatImageList, CatImageList[i]);
//this CODE TO FILTER LARGE AND SMALL BREEDS BASED ON WEIGHT
if (CatWeightList < 15) {
appendItem(SmallCatWeightList, CatWeightList[i]);
} else {
appendItem(BigCatWeightList, CatWeightList[i]);
}
}
for (var i = 0; i < DogIDlist.length - 1; i++) {
appendItem(FiltDogIDlist, DogIDlist[i]);
appendItem(FiltDogWeightList, DogWeightList[i]);
appendItem(FiltDogBreedList, DogBreedList[i]);
appendItem(FiltDogTempList, DogTempList[i]);
appendItem(FiltDogImageList, DogTempList[i]);
}
}

// filter the lists and sets up the screen
listSetup();

// when the dropdown is changed, filter the lists and set up the screen
onEvent(“CatsDropdown”, “change”, function(){
setProperty(“CatName”, “text”, FiltDogBreedList);
listSetup();
});

// sets up the screen elements
function updateScreen(){
var randomIndex = randomNumber(0, FiltCatIDlist.length-1);
}

// sets up the lists and the screen
function listSetup(){
filter();
updateScreen();
}

//BUTTONS
//The following segment allows buttons to switch between all 3 screens accordingly
onEvent(“dogsButton”, “click”, function( ) {
setScreen(“DogScreen”);
});

onEvent(“catsButton”, “click”, function( ) {
setScreen(“CatsScreen”);
});

onEvent(“Dogbutton2”, “click”, function( ) {
setScreen(“DogScreen”);
});

onEvent(“Catsbutton2”, “click”, function( ) {
setScreen(“CatsScreen”);
});

onEvent(“goHomeButton”, “click”, function( ) {
setScreen(“HOME”);
});

onEvent(“goHomebutton”, “click”, function( ) {
setScreen(“HOME”);
});

//The following segment will refer to the CATS screen

//CATS dropdown
onEvent(“CatsDropdown”, “input”, function( ) {
for (var i = 0; i < 0; i++) {
setProperty(“CatName”, “text”, “vvv”);
}
// udate screen
});

//CATS Breed Name

//CATS Breed Picture

//CATS Temperament

//The following segment will refer to the DOGS screen

//DOGS dropdown

//DOGS Breed Name

//DOGS Breed Picture

//DOGS Temperament

2

The first problem I see is that

function updateScreen(){
  var randomIndex = randomNumber(0, FiltCatIDlist.length-1);
}

doesn’t do much of anything. It chooses a randomIndex, which isn’t used for anything. You need to put values into the text and picture boxes. Presumably, the one you chose randomly.

The second thing I see is in filter()

  for (var i = 0; i < CatIDlist.length - 1; i++) {
    appendItem(FiltCatIDlist, CatIDlist[I]);
    appendItem(FiltCatBreedList, CatBreedList[I]);
    appendItem(FiltCatTempList, CatTempList[I]);
    appendItem(FiltCatImageList, CatImageList[I]);
    //this CODE TO FILTER LARGE AND SMALL BREEDS BASED ON WEIGHT
    if (CatWeightList < 15) {
      appendItem(SmallCatWeightList, CatWeightList[I]);
    } else {
      appendItem(BigCatWeightList, CatWeightList[I]);
    }
  }

You are putting all of the columns into the filter lists except for weight. That won’t work. You no longer have a match between breed and weight. Filter all columns or none.

And last I see for (var i = 0; i < CatIDlist.length - 1; i++) {. I think you are going to ignore the last cat. With < you don’t also need to subtract 1. It will always stop at one less than the length.

3

Thank you so much. I will work on this.

4

Fixed that, but still not working

5

As always it is doing exactly what you are telling it to do. So you are telling it to do something you don’t want.

The first thing you want to do is look at the callback function for CatsDropDown. What are lists are you filling?

Now, look at what you are putting into the text boxes. It is showing up perfectly. So what must change?