Forum Discussion

SaadSiddiqui-4f's avatar
SaadSiddiqui-4f
Community Member
3 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 different solutions in previous discussion threads but nothing seems to work. I have tried all the following:

https://community.articulate.com/discussions/articulate-storyline/set-variable-for-storyline-variable-from-web-object

https://community.articulate.com/discussions/articulate-storyline/how-do-you-get-a-web-object-variable-from-storyline

https://www.youtube.com/watch?v=nC34k54fbF8

What Am I missing?

General E-Learning
    • FaffieKhan's avatar
      FaffieKhan
      Community Member
      3 years ago

      Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • FaffieKhan's avatar
    FaffieKhan
    Community Member
    3 years ago

    Have you found a solution to this question, Saad?

    If you have, please share it. It would be much appreciated.

  • FaffieKhan's avatar
    FaffieKhan
    Community Member
    3 years ago

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

    • SaadSiddiqui-4f's avatar
      SaadSiddiqui-4f
      Community Member
      3 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.

Related Content