Advanced AppLab Features

[bhatnagars]

I think there is no easy way to do this. You would have to do it manually by using global boolean variables. Here is an example: https://studio.code.org/projects/applab/luJm5Us4dXdmGPYWvq3yOA

Here is a picture:

[baker]

yeah,

disabling a button is an html feature and you can’t really control that from app lab (v. css which you often can).

A clever (hacky) way to get the behavior you want without variables is to show/hide a label (with no text) that sits over the button. When the label is showing the button cannot be clicked. When it’s hidden you can.

Here’s an example where I made the labels red so you could see them.

Check out what I made

Make the labels white and/or semi-transparent, boom, disabled button.

An option to consider. Cheers,

Baker

[azwelling]

Thanks for the ideas. Hoping there was a hidden option…but ideas are great work arounds!

Thanks.
Andrew

[baker]

You can hide / show things. But “disable” usually implies visible but not working.

If all you want is hide/show then just use setProperty("id","hidden",true) or use false to show it.

There are also showElement("id") and hideElement("id") commands you can use.

[josh]

There’s one more solution using the CSS pointer-events property and the setStyle() command. To disable a button using CSS, just set the style of the button like so:

setStyle("button", "pointer-events: none");

and then re-eneable with:

setStyle("button", "pointer-events: auto");

Here’s a quick demo that adds changing the button color for better visual cuing.

Check out what I made

[azwelling]

Hi Josh…that is exactly what I’m looking for! Thanks.

Regards,
Andrew

[terry.henderson]

I have several students who want to change the shape of the cursor for their app. I know this is a very simple change in css. Is there a way that we can access or modify the css that AppLab is using behind the scenes?

Terry Henderson

[josh]

Using the same setStyle() command mentioned earlier you can set the cursor property of any design mode element (including the screen). So to change the curosor to spinning wait icon, you could use

setStyle("screen1", "cursor: wait;");

Here’s a quick example app

Code.org

[briggsbanigo3]

How do you focus and an element in applab

[samantha.shugars]

Not sure if I’m posting in the right place. I am a teacher looking to create an example app. Specifically, I want to make a side scrolling timeline with links that would take the user to other screens. I found one article about making a sprite move beyond the screen limits but it didn’t address my problem. If I use an image that extends beyond the screen limits, it is simply cut off. Is there any way to do this? Scrolling vertically or horizontally would work.

I also have students who would like to make a simple side-scrolling game and are curious about the same topic. Are there any pre-existing threads that address this?

Thank you so much!

[gjschmidt]

I don’t think AppLab does what you really want. You can have an image that is bigger than the screen and could have the image scroll back and forth on the screen. It’s not smooth by any means. Here’s an example: https://studio.code.org/projects/applab/LBKq8XrhcjaTniio0VTjK0jlsOjqghnFPy6o3Z5xvVA

[jdonwells]

Your project can use open("some url"); You can set up an onEvent that calls open.

Your students should look at Game Lab. It is very much like App Lab but has tools and graphics that make animated game creation easier.

[samantha.shugars]

Thank you for your input. That is what I thought as far as Game Lab. I will encourage those of them who want to make a game to do that.

[isaiahmcfall06]

@brad

Josh made some noise, so new advanced App Lab features are on the way!

• #19935: App Lab: Expose selectionStart and selectionEnd on event objects
• #19963: App Lab: setSelectionRange

Those links include descriptions, sample code, and gifs of the new features in action.

These will probably ship next week, and proper documentation will show up sometime after that. In the meantime, docs for the browser-standard setSelectionRange, selectionStart and selectionEnd may be helpful.

I saw this in the textbox inputs, but can you add this feature to text areas as well?

[bhatnagars]

Please forward this request to support@code.org. I am sure they will make a note of it and look into it in the future.

[faithdwsn]

I am trying to iterate through a series of check-boxes to add up the total of them checked, resulting in the boolean value “true”.

However, variable scope barriers resist allowing any kind of foreach, for loop or iteration common in JavaScript. All of these elements require an individual id upon creation of each individual checkbox. They do not allow a “class” that I could apply to grab the tag for checkboxes as a group.

So, using the limitations inherent in the coding style of Code.org, how do I get the total of the checkboxes checked on the screen?

In terms of some efforts made already…The example listed in the code.org documentation for getChecked() only allowed me to grab the index of the number of the last checkbox selected. So if I selected the 11th checkbox, it would say 11, even I only selected 2 or 3 checkboxes. It was showing the location on the index, not the total checkboxes.

"
onEvent(“favorite”,“click”, function() {
var radioIDs = [“Red”,“Blue”,“Green”,“Orange”];
var index = 0;
while (index < radioIDs.length && !getChecked(radioIDs[index])) {
index++;
}
console.log("Your favorite color is: " + radioIDs[index]);
});

"

Source: https://studio.code.org/docs/applab/getChecked

Then after patterning another trial from another code.org resource, if one clicks on the Insert Event from the checkbox ID it will automatically insert something like this into the IDE.

"
onEvent(“IDname”, “change”, function() {
console.log (getChecked(“IDname”));
});

"

This would not work at all until I changed the wording to click, function. Now it works somewhat but outputs the wrong numbers and will not increment properly. It will for example, pop out a 1 after the first checkbox is checked, but then just stay there, even if there are 3 or 4 other boxes checked afterwards. It will only register the first one.

Any assistance or explanation of how to solve would be appreciated, since traditional JavaScript code will not work here.

Thanks,
Faith

[jdonwells]

I think you may have written a longer post than needed. Let me try to narrow it down.

You have several checkboxes on your screen. You want to know how many checkboxes are checked. You do not want to check each individually in code. You want a loop. You also want the checkboxes named something useful.

I would do this

var boxes = ["first","second","third","fourth"];
var sum;

onEvent("sum", "click", function( ) {
  sum = 0;
	for (var i = 0; i < boxes.length; i++) {
	  if (getChecked(boxes[i])) {
	    sum = sum + 1;
	  }
	}
	console.log(sum);
});

Try it

Check out what I made

[faithdwsn]

I needed to write a post that explained what was already tried per the posting instructions, as well as what I was trying to accomplish. The documentation did not adequately explain how to do this with the code yet. I tried a lot of different versions of iterating through the code. However, your sample code worked beautifully, so thank you.

What is amazing is how you were able to grab the variable name with a string here.

var sum;

onEvent(“sum”, “click”, function( ) {

Typically variable names cannot be enclosed by quotes or else they lose their functionality and turn into strings. I am very surprised that worked in code.org IDE, since it normally will not work in standard coding environments.

However, it did work here, so thank you for your tip!
Faith

[jdonwells]

The use of sum is purely coincidental. onEvent takes two strings and a function.

[faithdwsn]

It looks like you named your button the same name as one of your variables, that is why you also have a “sum” string available. It explains why the string works, it is not referring to the variable.

Thanks,
Faith