Forum Discussion

Nedim's avatar
Nedim
Community Member
3 months ago

Transform Your Text Entry Field into a Date Picker

A while ago, I was struggling with a history quiz where learners had to type in the date of a significant historical event. Although the required format was clearly stated in the instructions, many learners still missed it, leading to mistakes and incorrect submissions—even when they knew the correct answer. The number of acceptable variations kept piling up in the Form View, making it difficult to manage.

To solve this, I transformed the text entry fields into a date picker, allowing learners to select the date instead of typing it manually. This ensured that only one correctly formatted answer was accepted while still reporting both correct and incorrect responses to the LMS. The selected date was instantly set as the input value and could also be used to trigger other actions in Storyline based on its value.

With over 20 questions in the history trivia, selecting dates instead of typing them made the experience much more enjoyable for learners.

Let me know how you would use this feature in your project—I’d love to hear your ideas!

EXAMPLE:

7 Replies

  • KimGrovo's avatar
    KimGrovo
    Community Member

    Hello, 

    As someone who creates software training, I love the date picker. However, I am running into a couple of issues.   1) I cannot get the correct layer to appear and 2) I cannot get the date reset when it is wrong.  The correct date is 02/06/2025.  I tried over a dozen ways to fix including starting over.  

    I have been working on it 3 days and not sure how to fix.   I recreated my issue in the attached file. Any help would be appreciated. 

    Thank you,

    Kim 

    • Nedim's avatar
      Nedim
      Community Member

      Hi Kim

      1. Rename your "TextEntry" variable to "dateSelected"

      2. Delete ${index + 1} part. It should read setVar(`dateSelected`, dateStr);

       

      • KimGrovo's avatar
        KimGrovo
        Community Member

        Thank you sooo much!  It works beautifully now. I have been messing with JS so much in the last few weeks it kind of overwhelmed me. I appreciate your set of eyes to find the problem.   Using your help & the new JavaScript capability I easily got the reset to work when the try again is selected.  

        Thank you!  I will be using this data picker a lot!

        Kim  

         

      • CydWalker_mwhc's avatar
        CydWalker_mwhc
        Community Member

        Good question Noele! I know anytime I need to enter a date, I appreciate the calendar entry option. So for historical purposes like mentioned above, filling in a certificate with date, any time a date dropdown fits. Hopefully others will chime in.

  • Nedim this is such a good example and I can see so many applications where this kind of data validation would be helpful for folks! 

    Would love to hear from others about where they might use this!