Advanced AppLab Features

CS Principles Unit and Lesson Discussion
,
1

Welcome! This is a place for teachers who seek advanced AppLab Features for the Computer Science Principles Curriculum. Please use this space to share best practices, questions, thoughts, ideas and inspiration. We’re hoping to build a professional learning community for all of you amazing educators who are making change everyday in your classroom. Be sure to consult the AppLab docs.

2 Likes
2

Check the Tool Documentation on getText( );
https://docs.code.org/applab/getText/
or the textInput( );
https://docs.code.org/applab/textInput/
There are also getXPosition( ); or getYPosition( );
https://docs.code.org/applab/getXPosition/ | https://docs.code.org/applab/getYPosition/
Hopefully one of those works.

1 Like
3

Thx for the answer but nothing of that is adressing my problem since there is nothing about getting and setting the cursor position or getting an element by its ID.

4

I’m sorry that didn’t work for you. I will pass it on to the curriculum team. Please check back for an update.

5

I’m pretty sure this is not possible.

Where do you see the getElementById function? I don’t see it in the App Lab API (documentation - https://docs.code.org/applab/)

I don’t think the cursor is considered an element, therefore anything relating to getting the position of an element would not work.

Also, since this is supposed to be an app that’s possibly run on a phone, we cannot guarantee there is a cursor. We may only be able to sense clicks (taps) and swipes, but a user most likely is not dragging their finger on the screen the entire time, so even if a function to track a cursor’s position existed, it could potentially malfunction in such cases when there is no cursor position.

6

Thanks for the long answer.

I have for sure already been lokking in the documentaion and i know it’s not there. But i have also used some other methods like String.charCodeAt(var), String.fromCharCode(var) and String.toUpperCase() and they all worked fine so i was assuming that there are for sure more general javascript methids that will work even they are not documented.

But after reading your answer i’m sure i was not clear enough about what cursor i mean. I’m not looking for the normal screen cursor that you generally don’t have on a phone, for the text cursor when you are writing something in a textInput element.

To help you better understand my whole problem i’ll explain it here:
I have the code parts
onEvent("text_inputCW_de_en", "input", function() {
setText("text_inputCW_de_en", checkCWForLetters(getText("text_inputCW_de_en").toUpperCase()));
}

function checkCWForLetters(text) {
var retText = "";
for(var i = 0; i<text.length; i++) {
if(text[i] >= 'A' && text[i] <= 'Z') {
retText += text[i];
} else {
showElement("text_areaError");
}
}
return retText;
}
The problem is, that when i’m not only writing in that textInput but editing it in the middle of the text, every time i type a character or delete one the text cursor doesn’t stay where it should but jumps to the end of the written text which is very annoying and that’s the thing i want to change by moving the cursor manually back where you would expect it to stay.

7

Unfortunately what you’re trying to do isn’t really possible to do easily in App Lab - the approach that you’re using is about as close as you can get. I’ve logged the request with our engineering team, since it’s come up a few times before.

1 Like
8

One of our engineers has a plan, stay tuned…

1 Like
10

Quick update, @brad’s changes went live this afternoon, so you can now read (using event.selectionStart / event.selectionEnd) and set (using setSelectionRange) the cursor position in a text box. Example app here https://studio.code.org/projects/applab/_DAjuTfUDTdvBs_oxWHiiQ/view

1 Like
11

You are awesome guys! Thank you very much. I will try it as soon as i find time (most likely today).

1 Like
12

Hi,

i’m currently working on an app where i’d need the cursor position in a textInput. I tried to do it via
getElementById("ID).selectionStart;
but that isn’t working so far.

Any ideas how i can do it or how i can use getElementById("ID") ?

13

AppLab doesn’t support treating elements as objects, and instead relies on a flat API referencing objects by ID. In order to get the cursor position in a text input, you’ll need to do it in an event handler since cursor position is passed through the event object. For example, to catch the cursor position when a key is pressed or moused is clicked in your input, you might use something like:

textInput("myInput", "Some stuff");
textLabel("position", "");

onEvent("myInput", "keyup", function(event){
  setText("position", event.selectionStart);
});

onEvent("myInput", "mouseup", function(event){
  setText("position", event.selectionStart);
});
14

I just realized I posted this in the wrong topic. Ignore this post.

I’m trying to figure out APIs right now, and I sort of understand how they do. One of my students wants to integrate data from professional sports into his app. Code.org would want to play to their audience and people love sports so I figured there might be a Sport stats API or something.
Some of the API’s are pretty non-descript though, so I can’t quite pin down if some of them might contain sports data. For example, I don’t know what the google and yahoo APIs do.
Any input would be nice. I think I’m going to push big data harder next year.

15

APIs are tricky because there’s no single standard format, so depending on where you want to get your information from, you’ll have to figure out both how that API wants your request to be structured and how to parse the data that they return - there’s a lot of trial and error involved. Another approach would be to look for existing databases (or spreadsheets) that might be imported in to the data tab and processed that way.

16

I have a student who is creating an app to manage splits from relays. All of the values for four textboxes (used for 4 splits) will be floats. Is there a way in AppLab to indicate that the textbox will only receive an integer and thus cause the number pad on mobile devices to appear rather than the standard QWERTY keyboard?

17

Great question… my gut says no but this seems like a great “official” code.org question. I will raise the issue to the curriculum writers at code.org!

18

@jbundt unfortunately, no. Not yet. There are a host of mobile-friendly things we have on the back burner waiting to be deployed with App Lab 2.0 (timeline is indefinite).

There are things you can to do to ensure what’s entered is actually a number, but nothing native to bring up the numeric keypad.

Depending on the context I could imagine some workarounds, but…depends.

Baker
CSP Team

19

@baker, thanks for the reply.

The student came up with a solution - using another screen to create a number pad for entry. It seems to be working quite well and has presented some new challenges. It has been fun to observe.

Thanks again,

Joel

20

Independent of this thread I had a student looking to do a password text entry where the characters are replaced by asterisks. event.selectionStart and event.selectionEnd were they answer in the case as well. It wasn’t trivial to deal with copy-paste and delete from the middle. See the example code here. https://studio.code.org/projects/applab/Jxm7rJiWJ5kV3TM9-EGkZg/edit

25

Is there a way to disable a button in App Lab?