Forum Discussion

SaadSiddiqui-4f's avatar
SaadSiddiqui-4f
Community Member
4 years ago

Capture input type date from web object to Storyline 360 variable.

I'm using HTML input type date to simulate the date picker as a web object in Storyline 360.   After input, it should check whether the learner selected the correct date or not.  I'm trying di...
General E-Learning
FaffieKhan's avatar
FaffieKhan
Community Member
4 years ago

Thank you. I would appreciate the download - if you think it's appropriate.

  • SaadSiddiqui-4f's avatar
    SaadSiddiqui-4f
    Community Member
    4 years ago

    This is the code I used for the date.

    I insert it as a web object in Storyline 360

    I set a variable in Storyline (date_select)

     

    <html>
       
    <body>
     
    **/ Input taken from HTML input tag/**
    <input type="date" id="myInput" oninput="updateSLVar()"></input> 
     

    <script>

    function updateSLVar() {
        var x = document.getElementById("myInput").value;
    **/Input value saved in variable x /**
        var player = parent.GetPlayer();
        player.SetVar("date_select",x);
    **/Value of variable x passed to Storyline Variable 9date_select)/**
    }
    </script>

    </body>
    </html>

    This is how it is showing after export from Storyline

    https://360.articulate.com/review/content/f6695dbf-378d-4400-beaf-b3a71f2c9aa8/review

    Select a date from the date picker by clicking on the calendar icon on the left.

    You can see the storyline variable reference showing value in the green rectangle 

    I hope this helps.

    Thank you.

    • FaffieKhan's avatar
      FaffieKhan
      Community Member
      4 years ago

      Amazing!!