Creating a textArea in AppLab via script?

CS Principles Coding and Debugging Help
1

I have a student looking for the built-in function to make a textArea. Is there one?

2

Greetings @greiber,

My Answer

As a matter of fact it is possible to implement what your asking for, though it depends on what your looking for if it’s a textArea that doesn’t need any input then use textLabel(id, text) if it’s text with an input option i recommend textInput(id, startText)

Links / Sources

Documentation References:

Demo: https://studio.code.org/projects/applab/eG6C5jPi6MIQS4p0_TjkTlE4YppqLNpTUj1LpHMhKtg/view

Project Source Code In Case Original Gets Deleted

textLabel("textbox", "");
setProperty("textbox", "width", 320);
setProperty("textbox", "height", 450);
var name = "Jhon, Doe";
var age = "unknown";
setProperty("textbox", "font-size", 30)
setText("textbox", "Name: " + name + "\n" + "Age: " + age);

I hope this helps if you have any more questions don’t hesitate to ask!

3

While textInputs and textLabels can be created with textInput() and textLabel(), there isn’t a similar function to make a textArea.

If you want your text label to contain visible multi-line text without modifying its height (like text areas), use setStyle to set its overflow-y property, making it scrollable.

//textArea-like text label (doesn't support input)
textLabel("textBox","This text label contains \n multiple \n lines \n of \n text");
setStyle("textBox", "overflow-y:scroll");

This can be useful if the text label has a small height or fontSize. Text labels are read-only, however, so they doesn’t support input like text areas. There are ways to make psuedo-textLabels that accept input, but it’s not a straightforward task to create them.

2 Likes
4

thx for the help, but this isn’t what I am looking for. I’m looking for a textarea input element.

5

@ismailmf777 Thx for confirming there isn’t a textarea element. I was hoping that the textInput element could be similarly styled as the text label to allow wrapping of the input, but it looks like no.

6

Making a textarea with input is a bit difficult, as there unfortunately is no built-in function. However, it’s possible to create your own function that does basically the same thing.

You can construct a new element using the write() function by passing in plain HTML. By passing in a div element with the attribute contenteditable="true", you can edit the element and write in it as you would a text area. To make it look like a normal text area, you have to include some styles.

Here’s an example of how I turned it into a function.
You can define the id, placeholder text, size, and position. You also have to define the active screen the user is currently on. This is important, otherwise the text area will not be displayed.

//id, text, activeScreen, width, height, x, y
textArea('newTextAreaId', "Text goes here", "screen1", 200, 100, 20, 20);

Hope this helps, my apologies if I didn’t explain it very well.

2 Likes
7

Nice! Thanks, @letti42

8

This is awesome! I missed the “write()” allows you to dump HTML. Gotta play with that. Can you also dump script and CSS? …oh, the hackery!

9

nope. Some HTML gets stripped out, like TEXTAREA, oddly, and SCRIPT predictably.

10

Yes, the write function is very limited… not even iframes, objects, or video tags work!