Capture input type date from web object to Storyline 360 variable. Apr 16, 2022 By Saad Siddiqui 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-objecthttps://community.articulate.com/discussions/articulate-storyline/how-do-you-get-a-web-object-variable-from-storyline https://www.youtube.com/watch?v=nC34k54fbF8What Am I missing?
Iffaf Khan almost 2 years ago08/15/22 at 2:01 pm (UTC) Have you found a solution to this question, Saad? If you have, please share it. It would be much appreciated.
Math Notermans almost 2 years ago08/15/22 at 3:53 pm (UTC) Although this partially works... i do have to finetune it a bit more to work perfectly.https://360.articulate.com/review/content/44dd47e4-b3d6-45bc-99ec-3f01352ee6fe/reviewFirst click the button 'pick a Date'... Then click the input textfield and a datepicker will appear. Choosing a date and it will show in the inputfield.As said first have to finetune this a bit more...
Iffaf Khan almost 2 years ago08/15/22 at 4:06 pm (UTC) Thank you. I would appreciate the download - if you think it's appropriate.
Saad Siddiqui Author Iffaf Khan almost 2 years ago08/15/22 at 4:24 pm (UTC) 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.
Saad Siddiqui Author almost 2 years ago08/18/22 at 3:52 pm (UTC) Here it is. JavaScript_Date_picker.story index_date.html
Iffaf Khan Saad Siddiqui almost 2 years ago08/18/22 at 3:53 pm (UTC) Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8 Replies
Have you found a solution to this question, Saad?
If you have, please share it. It would be much appreciated.
Although this partially works... i do have to finetune it a bit more to work perfectly.
https://360.articulate.com/review/content/44dd47e4-b3d6-45bc-99ec-3f01352ee6fe/review
First click the button 'pick a Date'...
Then click the input textfield and a datepicker will appear.
Choosing a date and it will show in the inputfield.
As said first have to finetune this a bit more...
Thank you. I would appreciate the download - if you think it's appropriate.
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><script>function updateSLVar() {var x = document.getElementById("myInput").value;var player = parent.GetPlayer();player.SetVar("date_select",x);}</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.
Amazing!!
May I have a look at your file, Saad?
Here it is.
Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!