June 10, 2019
Use A Smart Shape As A Text Entry Box
Comments
(14)
June 10, 2019
Use A Smart Shape As A Text Entry Box
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 154 people
(14)

Not sure how much interest there would be in this but I have often desired a bit more flexibility over my text entry boxes.

In this project, I try to do just that by turning a basic smart shape into a text entry box.
The project has a label asking you to enter your name, a button to clear the smart shape if you make a mistake, a submit button to take you to the next slide, and a smart shape in which to type your name.
Now I can have it be a bit bigger with rounded corners, change colors and size, change the shape, and still incorporate the input with variables.

When you enter the slide you should simply be able to type your name and it will appear in the smart shape.
One drawback of this specific project is that the backspace key doesn’t function.
There may be a way to make that happen – I don’t know – I have not looked into it.

Another drawback is that the participant does not get to see a cursor.

Depending on your needs – this may or may not be a problem.

I limited the characters to 15 but you could still “overfill” the box. I was not going to be that fussy since you can see how this works.

Take a look and ask any questions you have. I will explain how I did this in another post.
Sorry – I didn’t spend a great deal of time polishing this one.

Play
14 Comments
2019-06-13 15:28:02
2019-06-13 15:28:02

Clever

Like
(1)
2019-06-11 15:54:39
2019-06-11 15:54:39

It’s a problem linked with the browser as Lieve suggests… I have this issue only with Mozilla Firefox… I tested with Chrome and it’s perfect !!…

And probably with my configuration with Firefox ?…

Like
(1)
(3)
>
Ludovic Mercier
's comment
2019-06-11 16:33:48
2019-06-11 16:33:48
>
Ludovic Mercier
's comment

Double-checked in FF, indeed it is not functional at all.  Entry doesn’t appear, is not saved to the variable. I just updated to the most recent version, didn’t edit anything.

Like
(1)
>
Lieve Weymeis
's comment
2019-06-11 16:55:41
2019-06-11 16:55:41
>
Lieve Weymeis
's comment

Odd – it works in my Firefox Quantum v67.0.2 (64-bit)

Like
(1)
>
Greg Stager
's comment
2019-06-11 16:59:01
2019-06-11 16:59:01
>
Greg Stager
's comment

Also on 67.02 here.  Since I don’t use that browser a lot, did keep default settings.

Like
(1)
2019-06-11 13:16:03
2019-06-11 13:16:03

I did make another version of this where you must always click on the smartshape first to give it focus before typing. I wonder if that would actually work better for you.

Like
(1)
2019-06-11 12:33:39
2019-06-11 12:33:39

Sorry !!… No zooming effect !… It was just a “pop-up” at the bottom of my screen and when it appears it looks like my screen reduces !… But still, I can’t manage to tape my name. In fact my name appears in the “pop-up”.

See Attached…

 

Attachment

Like
(1)
(3)
>
Ludovic Mercier
's comment
2019-06-11 12:52:47
2019-06-11 12:52:47
>
Ludovic Mercier
's comment

Works fine for me, tried in Chrome and Edge. Which browser do you use?

When the entry is empty, an exclamation mark appears, would be nice to replace that by a hint? User variable has to be created, correct? Default TEB is the only situation where it is created automatically.

Like
(1)
>
Ludovic Mercier
's comment
2019-06-11 13:12:47
2019-06-11 13:12:47
>
Ludovic Mercier
's comment

Yes – there is a variable and the the smartshape has the $$variable$$ there which is fed the information from the keystrokes.

Not sure what the pop-up field is. Are you maybe using some sort of browser extension? I don’t get any pop-ups in Chrome or Firefox.

I put the exclamation point there to be placed after one’s name when they type it in. I suppose I could put some additional logic on the submit that would verify something was actually typed in. So if you don’t enter anything and just hit submit the next page will show just the exclamation on that line.

Like
(1)
>
Greg Stager
's comment
2019-06-11 13:34:46
2019-06-11 13:34:46
>
Greg Stager
's comment

Sure. I always add an action to check if the variable is empty, and show a hint in that case.

Like
(1)
2019-06-11 07:54:57
2019-06-11 07:54:57

Indeed, TEB needs some furbishing. I mostly use Scrolling Text interaction or the CpExtra widget by InfoSemantics to get over them. For SWF output it was a lot easier, Adobe even allowed to edit the variable for the Scrolling Text interaction and it did show up in the box. Not for HTML5 output however.

Totally understand what you want to do, very interesting.

Like
(1)
(1)
>
Lieve Weymeis
's comment
2019-06-11 12:21:46
2019-06-11 12:21:46
>
Lieve Weymeis
's comment

Sorry Lieve !… You can run Greg’s animation successfully ?

It appears I can’t write my name. Blocked after the first letter and have to wait 1 or 2 seconds… while the screen seems to zoom ?… (But there’s no effect in Greg’s work…)

Thanks

Like
(1)
2019-06-11 07:14:17
2019-06-11 07:14:17

Hello Greg !…

Nice try !… The lack of options concerning the TEB is THE big weak point of Captivate… as fa as I’m concerned…

If I really want to “center” the letters in a small TEB, I delete all the colored options to make it fully transparent, and I put a colored smarsphape under the TEB. But it’s quite some DIY and I don’t like tit !…

In your demo, I can only tape the letters when the central part of the screen is zooming. But since I wrote the first letter, it’s de-zooming and I can’t write anymore letter ?… I have to wait 1 or 2 seconds that the screen zooms again to write the next letter… Don’t know if I’m clear but the zooming effect may be the cause of a problem ?…

Happy Captivate !…

 

 

 

 

 

 

 

Like
(1)
(1)
>
Ludovic Mercier
's comment
2019-06-11 10:40:04
2019-06-11 10:40:04
>
Ludovic Mercier
's comment

I guess I am not quite sure what you mean by zooming and de-zooming. Are you resizing the window or using the zoom feature of the browser like using Ctrl-‘Mouse wheel’? I tried those and did not seem to have an issue. I did not build any effects into it – should just be a static page.

Like
Add Comment