Relying on Text Entry Variable to Trigger Layer Without Losing Focus
Feb 08, 2016
I'm building a Try Me simulation that instructs the learner to type something specific in a text entry field ('123' for example) and only allow them to then click the SEARCH button once the correct characters are typed. It's important to note the SEARCH button is actually just an area of the static background screenshot.
To solve for this I set the Text Entry trigger to show a layer with a hotspot over the SEARCH "button" only when '123' is typed; however, the Trigger requires that the Text Entry field lose focus before the hotspot layer displays. Meaning, the learner must press ENTER, click elsewhere on the slide or some other action that isn't representative of how the tool I'm attempting to simulate actually works.
My question is, can I set the Trigger so the hotspot displays as soon as the learner types '123' (and only '123')?
13 Replies
Hi Bryan
I have a similar requirement on my getting started screen when they input their name, I then want the Next button to flash. So I have set up an object offstage that is triggered to visited when the user clicks in the TEB, this then triggers the layer to show the flashing next. Not sure if an offstage object will work for you but it takes away the need for the user making that 'control loses focus' action.
Thanks Wendy. Unfortunately I don't believe that will work as I want the hotspot layer to display only after the learner has typed exactly '123', and not when they click inside the Text Entry field. Thanks.
Can you post your .story?
Hi, I think this email checker could be adapted to your purpose. An exact match could be used to trigger the next action. The input text box var is called matchme. The Result variable is what fires the next action if it is true (Result = True)
var player = GetPlayer();
var rawString =player.GetVar("matchme");
var mcontains="false";
var searchString=rawString.toLowerCase();
if (searchString.match ("123") ) mcontains="true";
player.SetVar("Result",mcontains);
The reference will only update after the control loses focus. You may be able to trigger a function that then tracks key presses perhaps setting booleans to T when it matches "1", "2" "3" but you would have to also Map the rest of the Keyboard to capture an incorrect response.
Hey Bruce - when does the JS run? My primary issue that the Text Entry field works fine but only after it's no longer in focus, meaning the learner has to click somewhere else on the screen. Does the script run automatically?
Hi, Bryan -- So glad to see you're getting really great replies here! I wanted to mention for anyone who may be unaware, that unfortunately, we are not able to provide support for JavaScript coding. Here also is a sheet on JavaScript Best Practices if you'd like to check it out. :)
I would just have the hotspot on the screen and add a condition to it. Set it to show the search results layer then add a condition that says if "text entry" is equal to 123. that way it will only work when they type 123 other wise it's like it's not even there.
Hello Bryan,
Here is my demo of what I think you are trying to achieve. Ive used Eric's suggestion and also a button click solution (choose which best suits your need) with a reaction to show an image if the condition is met. To test this you may need to publish to CD to get JS to play on your local PC. Publish to web otherwise.
Thanks for all the recommendations, I appreciate it. However, it seems there's not a solution without first allowing the Text Entry Field to first lose focus. Even asking learners to move the mouse across a hotspot to trigger the JS isn't authentic to the actual tool. Thanks!
Bryan, my solution works and does not require the box to lose focus. place the hot spot and the text entry on the same layer and add the 123 condition to the hot spot instead of the text entry box. See attached type 123 into the search to get a thumbs up
I tried it and Eric, the focus is lost when you click the Search button, so the variable is fed that way. That is why your solution works.
I wanted to fake search suggestions like the ones google do where things appear AS you type them. So as the user types the letters that I tell them to, different layers appear one after the other, and it looks like a search function suggesting results.
Now, this isn't flexible. If the user backspaces, the layers are not going to flip back in reverse order (it can be made to though)
Here's how I did it without any sort of focus losing, since the variable doesn't need to be adjusted :
1.I took two screen caps of the drop down list that contain the suggestions and put them both on separate layers, like this : One screen cap of the first suggestion list after two letters, then I put a third letter in and took another screen cap of the smaller list. I put both of these on their own layer.
2. Text entry on base layer. Display a message that tells user to type in "ani" for animal.
3. Add trigger to base layer that says "Display second layer when user presses n on text entry"
4. Add second trigger to base layer "Display third layer when user presses i on text entry"
Make sure "Hide other slide layers" box is checked, and "Prevent user from clicking on base layer" is not checked on layers other than base. This is in the layer settings. Cog wheel next to layer in layer window.
And magically it looks like search suggestions coming from the text box, but the variable itself is never actually adjusted because the cursor never exists the text entry.
So the user types "an", gets a first list and when the user inputs the final "i" the third layer appears with a hotspot on the correct result.
It would be possible to trigger the layers to fold back out in order by adding a "Hide this layer when user presses backspace" on each layer other than base.
Now even if the user doesn't type "ani" and simply types, "ni" it will still work.
So Yeah. If there was a way to adjust variables on each key strike, or using a specific command instead of finding a creative excuse to make the user lose focus, it would be much easier to come up with dynamic things like that.
Here is the story file. It's all in french, sorry about that.
You will want to look at the last slide of this scene.
Go type "ani" in the text field pointed out by the red callout and you will see the fake search suggestions. I have not set the backspace thing up yet.
This discussion is closed. You can start a new discussion or contact Articulate Support.