‘16-‘17 General Discussion for Lesson 5.14


#1

Use this thread to discuss your questions and comments about how to run the lesson.


#2

One thing to watch out for here, the noise that corresponds to pressing the up arrow has a bit of a extra “silence” at the end. Students thought it wasn’t working but I think it was still processing the last keypress. So if a student hit the up arrow several times in a row, it might only work every other time but if they paused between clicking the key, it would make the noise each time.

Another misconception was that students using text weren’t using the “function(event)” with “event” as a parameter - if they don’t use that as a parameter, event.key won’t work.


#3

When I try and add a picture using the url, it doesn’t bring up the picture. Am I doing something wrong?


#4

Maybe you are copying the pages url and not the image url. Stage1.21 is a document that explains how to use the url of the image. https://studio.code.org/s/csp5/stage/1/puzzle/21.


#5

Check the appLab JavaScripts docs: SetImage https://docs.code.org/applab/setImageURL/
GetImage
https://docs.code.org/applab/getImageURL/

There are examples there that should also give you clarity.


#6

Yes, thanks, I understand how to add the URL of the image using the designer mode. However, I am having trouble when I run the My Favorite Things app that allows you to add the URL of the image to the list. When I copy and paste the URL into the text box and click add, it doesn’t show me the image, it just shows me a placeholder to the image.


#7

Help! I can’t seem to get the url and images to update / display correctly. Here’s what I have for the code at this point:

//Creating the favoriteThings array
var favoriteThings = [];

//Adding the images to the favoriteThings array
appendItem(favoriteThings, “http://ihelp-family.com/images/family-graphic.png”);
appendItem(favoriteThings, “http://img2.tvtome.com/i/u/0aa3afb3cbe3468fc6e43e50070b0810.png”);
appendItem(favoriteThings, “https://s-media-cache-ak0.pinimg.com/736x/09/72/d4/0972d488ecc6f0938f1635cd66eef759.jpg”);

//Creating the starting point for the array.
var favoriteThingsIndex = 0;

//Updating the favThings function
favThingsUpdate();

//When I click on the add button, it will add another itme to the array
onEvent(“addBtn”, “click”, function(){
insertItem(favoriteThings, favoriteThingsIndex, getImageURL(“newEntry”));
setImageURL(“mainScreen”, favoriteThings[favThingsUpdate]);
favThingsUpdate();
});

//When I click on the Next button, it will advance to the next item in the array
onEvent(“nextBtn”, “click”, function(){
nextItem();
});

//When I click on the Previous button, it will advance to the previous item in the array
onEvent(“lastBtn”, “click”, function() {
lastItem();
});

//Similar to the next button, but instead using the right arrow key.
onEvent(“screen1”, “keydown”, function(event){
if (event.key == “Right”){
nextItem();
}
});

//Similar to the previous button, but instead using the left arrow key.
onEvent(“screen1”, “keydown”, function(event){
if(event.key == “Left”){
lastItem();
}
});

//When I add an item to the “new entry” box, it will add it to my array.
function favThingsUpdate() {
setImageURL(“image1”, favoriteThings[favoriteThingsIndex]);
setText(“pageNum”, (favoriteThingsIndex + 1) + " of " + favoriteThings.length);
}

//The function to advance to the next item in the array.
function nextItem(){
favoriteThingsIndex++;
if(favoriteThingsIndex == favoriteThings.length){
favoriteThingsIndex = 0;
}
favThingsUpdate();
}

//The function to advance to the previous item in the array.
function lastItem(){
favoriteThingsIndex–;
if (favoriteThingsIndex < 0){
favoriteThingsIndex = favoriteThings.length - 1;
}
favThingsUpdate();
}

Thanks in advance!

Nick


#8

@nick.bahr can you include the actual project? Go to “share” in the top left hand corner and just paste the URL. That will be easiest to help you debug it.

Thanks!


#9

@nick.bahr

One of the issues is here:

//When I click on the add button, it will add another itme to the array
onEvent(“addBtn”, “click”, function(){
insertItem(favoriteThings, favoriteThingsIndex, getImageURL(“newEntry”));
setImageURL(“mainScreen”, favoriteThings[favThingsUpdate]);
favThingsUpdate();
});

The bolded part above should be “favThingsIndex” - that should help but without the UI it is difficult to know how it displaying incorrectly


#10

Thanks! I made the change you suggest, but still no luck. Here’s the project:


#11

@nick.bahr it looks like it moves like it should - just the “add item” button wasn’t working, is that correct?

I changed line 17 FROM “getURL” to “getText” - that allowed you to add items. “getURL” gets the URL of an image already in the file - getText allows you to get the text of what is in an input element.

Is that the only thing that wasn’t working?


#12

Katie,

You are awesome! Thanks for the help!

Nick


#13

I am having the same problem.


#14

Hi @carrie_higgins,

Can you clarify the problem you are having? I added the image I found here (https://i.ytimg.com/vi/hbYK-JzFtPg/maxresdefault.jpg) to your app and it seemed to work as it should. It adds the image and shows it immediately. Maybe you already fixed it, but if it still is not working like you expected it to, let me know some more details and I can give it a shot again!

Happy coding!
KT