Text Entry fields not setting when control loses focus in mobile devices (Storyline 360)

Hi Daniel,

Thanks for reaching out and letting us know that you're running into a similar issue.

Do you know what version of Storyline 360 your course was published with? I'd be happy to take a look if you'd like to share the zipped published output.

With your permission, I'd like to take a look at your project file to investigate what's happening as well. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

We have the same problem.

I see that it's been more than 3 years, and the problem persists. We need an urgent solution. Mobile learning is on demand, and we can't ask learners to do weird things on the slides to go arorund Articulate's issues.

I attach one example of how this is affecting some of our interactions.

We need the users to press "Send", then show them what they have typed to confirm it's correct (using %varibale%), but it's not working because of the object doesn't lose focus when they press Send on Mobile.

 We use Storyline 360 v3.4122450.0

Hello folks,

We are currently experiencing a similar issue as the original post of this thread.

The Issue on Mobile Devices:
By default in the latest Storyline program when you create a Text input box it automatically creates and assigns a variable and registers its value when the object loses focus. When you use a text entry object in Articulate Storyline, the text you type in the field does not get registered until the field loses focus. That means you need to click outside the field (for example, on a button) to make the the text entry field losing its focus.

We are reading mixed messages in forums of some users blaming the Keyboard after iOS13,and others are saying it is a bug with Storyline that has not been resolved.

We know for a fact this issue was not present in the June 19, 2018 (Build 3.17.16117.0) because we had our courses QC and iPad issues were not there. We are currently using V 3.38.24 as of 21-4-12.

Our main issue now is the Mobile keyboard is always active, when you tap outside the field we can't get the Save+next button to lose focus. We are testing on iPad using the latest iOS. This does not happen on Desktop.

Solution:

We currently have a solution that involves JavaScript.

What we do is add one extra line after publishing the files (We already reference to JQuery in our index lms)

<script src="/client/name/businessPlan/js/jquery-3.2.1.min.js"></script>

It’s using JavaScript and jQuery (therefore, it won’t work in the mobile app AMP).

It only works on HTML5

JS Code will be placed in your Master slide/Your theme slide, it will not effect anything else:

var p = GetPlayer();
 var placeHolderText;

$(":input").each(function() {
var place = $(this).attr('placeholder');

if (place !== undefined)
{
 placeHolderText = place.split("|");
 if (placeHolderText.length==2)
{
 $(this).data('bd_place',placeHolderText[0]); 
 $(this).attr('placeholder',placeHolderText[1]);
 $(this).bind('input propertychange', function() {

p.SetVar($(this).data("bd_place"),$(this).val());
});
}
}
 });

This also helps you to monitor what the user is typing letter by letter.

This is the screen inside Storyline. It has the intro text. The text entry field. The placeholder text inside the field is important. Normally, it’s just what you want the user to see as a hint. This time, it contains two pieces of information, divided by “|”. The first part is the name of the Storyline variable (in this case, answer), the second is the actual text you want to display for the user.

answer|[Type your text here]

or

answer|[Escriba su texto aquí]

The program will remove the Storyline variable name in our case "answer", so the user won’t see it. However, when the user types in the field, the program will update this variable instantly.

2nd solution not tested:

Execute JavaScript trigger to run at timeline start:

$(function() {
$("input").keyup(function() {
$(this).blur();
$(this).focus();
});
});

Basically it causes the active input element to lose focus very briefly after every keystroke, thereby activating the "control loses focus" trigger, to which you can attach any action you like on a case-by-case basis.

Resources:

https://community.articulate.com/discussions/articulate-storyline/entry-text-without-losing-focus

https://www.rabbitoreg.com/2018/04/22/articulate-storyline-text-entry-without-losing-focus/

Hi 

I am still having this issue: I want people to fill in their name and then on some slides their name needs to appear. This works on my desktop, but not on my mobile (if I tap on the screen before submitting, the name appears, but not when I submit immediatly).
I haven't tried the JavaScript solution yet, but was hoping that there's an easier solution to it.

Hi Leonie, 

Thanks so much for reaching out! I'm happy to help!

In order to better assist you, I have a few questions:

• • What version of Storyline are you using?
  • Did you publish the content for Web or LMS?

I'd be happy to take a closer look at your setup. Feel free to share your .story file in this thread or privately in a support case.

Please let us know if you have any other questions! 

Hi! I am still having the issue posted here. I have created a slide where users need to put in their name to move onto the rest of the course. It works in desktop, but will not let them move on a mobile device. Was this issue resolved? 

I attempted the JavaScript solution mentioned above and was not able to resolve the issue.

I will be publishing it to an LMS, but have currently just seen the issue in review. I am using Storyline version from June 22nd. 

Hi Shannon,

Thanks for reaching out! We no longer see the bug where a Text Entry object will not set the value when the virtual keyboard is visible on a mobile device. I ran tests on Review 360 in this environment:

• The latest Storyline 360 version (Build 3.78.30680.0)
• A Redmi Note 11 Pro 5G device running Android 13 
• Google Chrome for Android

Please see the short video below of my results. The virtual keyboard is visible, and I'm able to jump to the Next slide after typing something on the Text entry object.

Do you see the same results on your end using my Review 360 link? I attached the sample Storyline project I used for the test.

If the issue happens only in your project, we'd be happy to look at your setup to troubleshoot. You may upload it here as an attachment or privately in a support case. We'll delete it when we're done testing! Kindly share the device, OS version, and browser you're using as well.

Hi Storyline Staff :-),

I'm facing the same issue.

I have the last version of SL360. I have published my project on the Web and I created Submit Buttons to click once the user has entered text entries (so I removed the built-in Submit button). There can be three different text entries on one slide. I am using a Galaxy Tablet "Tab S4" and I launch my project on Google Chrome (the app is up to date).

One very annoying thing is that I need to use the small keyboard to enter text because when the classic, bigger one is enabled, the slides become very small and it's not possible anymore to read the text on the slides. The small keyboard is not very practical but it seems it's the only possible way to use SL360 on this tablet. (This problem might be more due to the device than SL, and I believe there is no solution here).

The second issue is the topic of this thread: when I enter text on the various text entries on the slides, I click Submit and it says I had the wrong answer even if the entries are correct. When I click a second time on Submit (I have 3 possible tries) without changing anything in the text entries, it says I'm good. I want it to work for the first try.

Last thing: my project is in French if you need to take a look!

I tested Sharon's file above and it seems to work, but my project is almost exclusively based on several text entries on my slides and a lot of variables that are connected from beginning to end. So it would mean to rebuild the entire project all over again and I cannot do that. I hope there is an explanation and a less painful solution since this issue has been known for several years now. Also, I tried to use Sharon's file to rebuild on of my own slide and it did not work.

The only thing I have in mind to solve this issue is to create another button the user should click on before clicking on the Submit Button to make the text loses focus, which is very inconvenient (too many clicks kill the clicks ;-) ).

If you have an idea, I would love some help. This drives me crazy! Thank you very much :-)

Hi Joe,

Thank you very much for your reply and help!

I have just opened a support case (Case Number: 03811151) for this specific issue and I attached one slide to illustrate my problem. I translated the slide into English just to make it easier to understand. And an important note: in France, numbers are written using commas and not dots. I used text variables and not number variables as the results must have a positive or negative sign (and also because for other slides, I also need three decimals which is not possible with SL).

I have submitted another case for the same project as I also encounter an issue with the audio for this project (Case Number: 03811005). I attached the slide that does not work in the support case.

Thank you very much for your help :-)

Hi, Marion!

I see that my teammate, Chester, has been assigned to your support case (number 03811151). Once they are done testing your file, they will follow up with you via email.

In regards to your second case (number 03811005), my other teammate, Philam is working on that now! You should hear from them soon with their findings.