# Advanced AppLab Features

**URL:** <https://forum.code.org/t/advanced-applab-features/13742>\
**Category:** Unit and Lesson Discussion\
**Tags:** applab, csp-unit-5\
**Created:** [January 17, 2018, 4:40pm UTC](https://forum.code.org/t/advanced-applab-features/13742 "2018-01-17T16:40:23Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![bhatnagars](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/bhatnagars/32/4919_2.png) [@bhatnagars](https://forum.code.org/u/bhatnagars)\
**Post date:** [May 17, 2018, 6:00pm UTC](https://forum.code.org/t/advanced-applab-features/13742/26 "2018-05-17T18:00:05Z")

</div>

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](https://studio.code.org/projects/applab/luJm5Us4dXdmGPYWvq3yOA)

Here is a picture:

 ![](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/a/a8acb018dc9c9112cdafcc8ead028c012ec41590.png)

---

<div class="post-metadata">

**Author:** ![baker](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/baker/32/1229_2.png) [@baker](https://forum.code.org/u/baker)\
**Post date:** [May 17, 2018, 8:12pm UTC](https://forum.code.org/t/advanced-applab-features/13742/27 "2018-05-17T20:12:21Z")

</div>

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](https://studio.code.org/projects/applab/pN1y23LDNWlloYwqgXgICw)**
>
> I wrote the code myself with Code.org

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

An option to consider. Cheers,

Baker

---

<div class="post-metadata">

**Author:** ![azwelling](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@azwelling](https://forum.code.org/u/azwelling)\
**Post date:** [May 17, 2018, 9:01pm UTC](https://forum.code.org/t/advanced-applab-features/13742/28 "2018-05-17T21:01:32Z")

</div>

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

Thanks.  
Andrew

---

<div class="post-metadata">

**Author:** ![baker](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/baker/32/1229_2.png) [@baker](https://forum.code.org/u/baker)\
**Post date:** [May 18, 2018, 2:57pm UTC](https://forum.code.org/t/advanced-applab-features/13742/29 "2018-05-18T14:57:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![josh](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/josh/32/868_2.png) [@josh](https://forum.code.org/u/josh)\
**Post date:** [May 18, 2018, 3:21pm UTC](https://forum.code.org/t/advanced-applab-features/13742/30 "2018-05-18T15:21:40Z")

</div>

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](https://studio.code.org/projects/applab/ubcZlip6usKiyaJXD_GqTw/view)**
>
> I wrote the code myself with Code.org

---

<div class="post-metadata">

**Author:** ![azwelling](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@azwelling](https://forum.code.org/u/azwelling)\
**Post date:** [May 19, 2018, 12:27am UTC](https://forum.code.org/t/advanced-applab-features/13742/31 "2018-05-19T00:27:07Z")

</div>

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

Regards,  
Andrew

---

<div class="post-metadata">

**Author:** ![terry.henderson](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@terry.henderson](https://forum.code.org/u/terry.henderson)\
**Post date:** [October 8, 2018, 6:49pm UTC](https://forum.code.org/t/advanced-applab-features/13742/32 "2018-10-08T18:49:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![josh](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/josh/32/868_2.png) [@josh](https://forum.code.org/u/josh)\
**Post date:** [October 9, 2018, 11:49pm UTC](https://forum.code.org/t/advanced-applab-features/13742/35 "2018-10-09T23:49:48Z")

</div>

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

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

```

Here’s a quick example app

> **[Code.org](https://studio.code.org/users/sign_in)**
>
> Anyone can learn computer science. Make games, apps and art with code.

---

<div class="post-metadata">

**Author:** ![briggsbanigo3](https://avatars.discourse-cdn.com/v4/letter/b/edb3f5/32.png) [@briggsbanigo3](https://forum.code.org/u/briggsbanigo3)\
**Post date:** [July 29, 2020, 6:07pm UTC](https://forum.code.org/t/advanced-applab-features/13742/37 "2020-07-29T18:07:55Z")

</div>

How do you focus and an element in applab

---

<div class="post-metadata">

**Author:** ![samantha.shugars](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@samantha.shugars](https://forum.code.org/u/samantha.shugars)\
**Post date:** [October 5, 2020, 3:15am UTC](https://forum.code.org/t/advanced-applab-features/13742/38 "2020-10-05T03:15:17Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![gjschmidt](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gjschmidt/32/4922_2.png) [@gjschmidt](https://forum.code.org/u/gjschmidt)\
**Post date:** [October 5, 2020, 10:48pm UTC](https://forum.code.org/t/advanced-applab-features/13742/39 "2020-10-05T22:48:35Z")

</div>

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](https://studio.code.org/projects/applab/LBKq8XrhcjaTniio0VTjK0jlsOjqghnFPy6o3Z5xvVA)

---

<div class="post-metadata">

**Author:** ![jdonwells](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdonwells/32/7900_2.png) [@jdonwells](https://forum.code.org/u/jdonwells)\
**Post date:** [October 9, 2020, 4:41pm UTC](https://forum.code.org/t/advanced-applab-features/13742/40 "2020-10-09T16:41:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samantha.shugars](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@samantha.shugars](https://forum.code.org/u/samantha.shugars)\
**Post date:** [October 9, 2020, 7:37pm UTC](https://forum.code.org/t/advanced-applab-features/13742/41 "2020-10-09T19:37:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![isaiahmcfall06](https://avatars.discourse-cdn.com/v4/letter/i/cc9497/32.png) [@isaiahmcfall06](https://forum.code.org/u/isaiahmcfall06)\
**Post date:** [November 6, 2020, 12:22am UTC](https://forum.code.org/t/advanced-applab-features/13742/42 "2020-11-06T00:22:01Z")

</div>

> [@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](https://github.com/code-dot-org/code-dot-org/pull/19935)
> - [#19963: App Lab: setSelectionRange](https://github.com/code-dot-org/code-dot-org/pull/19963)
> 
> 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?

---

<div class="post-metadata">

**Author:** ![bhatnagars](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/bhatnagars/32/4919_2.png) [@bhatnagars](https://forum.code.org/u/bhatnagars)\
**Post date:** [November 6, 2020, 3:44am UTC](https://forum.code.org/t/advanced-applab-features/13742/43 "2020-11-06T03:44:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![faithdwsn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/faithdwsn/32/5600_2.png) [@faithdwsn](https://forum.code.org/u/faithdwsn)\
**Post date:** [January 7, 2021, 8:21am UTC](https://forum.code.org/t/advanced-applab-features/13742/44 "2021-01-07T08:21:52Z")

</div>

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](http://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](http://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](https://studio.code.org/docs/applab/getChecked)

Then after patterning another trial from another [code.org](http://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

---

<div class="post-metadata">

**Author:** ![jdonwells](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdonwells/32/7900_2.png) [@jdonwells](https://forum.code.org/u/jdonwells)\
**Post date:** [January 7, 2021, 4:09pm UTC](https://forum.code.org/t/advanced-applab-features/13742/45 "2021-01-07T16:09:18Z")

</div>

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

```javascript
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](https://studio.code.org/projects/applab/9-JHPlNbP2Z0ae-Zw3kZqVcWLqnrhF94sDVziK4PGMA)**
>
> I wrote the code myself with Code.org

---

<div class="post-metadata">

**Author:** ![faithdwsn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/faithdwsn/32/5600_2.png) [@faithdwsn](https://forum.code.org/u/faithdwsn)\
**Post date:** [January 7, 2021, 10:23pm UTC](https://forum.code.org/t/advanced-applab-features/13742/46 "2021-01-07T22:23:15Z")

</div>

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](http://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

---

<div class="post-metadata">

**Author:** ![jdonwells](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdonwells/32/7900_2.png) [@jdonwells](https://forum.code.org/u/jdonwells)\
**Post date:** [January 8, 2021, 3:35am UTC](https://forum.code.org/t/advanced-applab-features/13742/47 "2021-01-08T03:35:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![faithdwsn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/faithdwsn/32/5600_2.png) [@faithdwsn](https://forum.code.org/u/faithdwsn)\
**Post date:** [January 8, 2021, 4:17am UTC](https://forum.code.org/t/advanced-applab-features/13742/48 "2021-01-08T04:17:37Z")

</div>

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

[Previous page](https://forum.code.org/t/advanced-applab-features/13742.md?page=1)

[Next page](https://forum.code.org/t/advanced-applab-features/13742.md?page=3)