Skip to main content
alistairm8561947
Known Participant
June 29, 2021
Answered

Inject user variable into TEB

  • June 29, 2021
  • 2 replies
  • 1612 views

I have an interesting request from a client. They would like the user to enter some data into a TEB on one slide then on the next slide that data pulls through to another TEB as the default text and allows them to edit it. This continues for a few slides as the user continuusly refines their text, each box capturing the edited text as a new variable.

 

Doesn't seem do-able with the default TEB tools but is there a JS solution that would achieve this?

 

Thanks

This topic has been closed for replies.
Correct answer Stagprime2687219

You can achieve this with a couple lines of code in the onEnter action of your slide.

Each slide where a new TEB is located will need a slightly modified code because we need to address different named text boxes and reference different variables. I will provide the code for a transition from slide 1 to slide 2 as an example and hopefully you can see how to modify it for your own needs.

 

setTimeout(function() {
TEB2=TEB1;
document.getElementById("box2_inputField").value=TEB1;
},100);

 

Basically we have three things going on here.

1. A timeout  that has two commands which execute after a tenth of a second after entering the slide.

2. We set the variable associated with the TEB on slide 2 to equal whatever was entered into the TEB on slide 1

3. We find the actual text entry box input field on slide 2 and set its visible contents to be equal to the TEB1 variable

 

Subsequent slides will just need to update the name of the variable and the name of the TEB itself.

Hope this helps. Let me know if you need any further assistance with this.

2 replies

Stagprime2687219
Stagprime2687219Correct answer
Legend
June 29, 2021

You can achieve this with a couple lines of code in the onEnter action of your slide.

Each slide where a new TEB is located will need a slightly modified code because we need to address different named text boxes and reference different variables. I will provide the code for a transition from slide 1 to slide 2 as an example and hopefully you can see how to modify it for your own needs.

 

setTimeout(function() {
TEB2=TEB1;
document.getElementById("box2_inputField").value=TEB1;
},100);

 

Basically we have three things going on here.

1. A timeout  that has two commands which execute after a tenth of a second after entering the slide.

2. We set the variable associated with the TEB on slide 2 to equal whatever was entered into the TEB on slide 1

3. We find the actual text entry box input field on slide 2 and set its visible contents to be equal to the TEB1 variable

 

Subsequent slides will just need to update the name of the variable and the name of the TEB itself.

Hope this helps. Let me know if you need any further assistance with this.

alistairm8561947
Known Participant
June 29, 2021

Yip that's it! You smashed it!

 

Thank you! This is exactly what I was after. 

Stagprime2687219
Legend
June 29, 2021

Glad to hear this worked for you.

Lilybiri
Legend
June 29, 2021

JS experts will provide you for a solution but there is an alternative.

You didn't tell if you need to score the TEB, it feels like it is a non-validated version. In that case, it would be easier to use the Scrolling Text interaction for your purpose. It can have an associated variable and has not the same limitations as the TEB. Here is a blog post explaining this interaction:

http://blog.lilybiri.com/scrolling-text-interaction-to-replace-text-entry-box

 

alistairm8561947
Known Participant
June 29, 2021

Hi,


Thanks for the reply.

 

I don't need to score the TEB, it's just some free-text that they can enter. I understand what you mean about the Scrolling Text but the user needs to be able to edit the text that is displayed so the workflow would look like this - 

 

Slide 1 - TEB (or similar) where user enters some text

Slide 2 - TEB (or similar) where user sees Slide 1 text and can edit this text

Slide 3 - TEB (or similar) where user sees Slide 2 text and can edit this text

 

Hopefully that's clearer.

Lilybiri
Legend
June 29, 2021

That is perfect for the Scrolling Text interaction. Did you read the post? The variable can be displayed and the learner can be allowed to edit the displayed text, which will lead to changing the value of the associated variable.

Your question was clear enough to me, or I wouldn't have posted my answer.