Do you have an example of a simulation for typing code blocks? Storyline text entries do not seem to support typing in multiple lines.
This is for a course on web development where we would like the learner to code a simple web page. They have to type in HTML, CSS, and JavaScript functions.
I can imagine SL being the wrong vehicle for this for more reasons than you mention. I would give them a text editor (many free ones that are great, and are designed for those functions) and let them write and test web pages locally and live. You could use w3schools as a resource. They have a pretty robust testing capability. Cut out the fooling around with an authoring tool as a middleman. Of course, I'm a professional educator, so my opinion may be colored by pedagogical considerations.
Simulating code development sounds like an innovative way to use Storyline! I haven't come across any examples to share with you but the members of our very talented E-Learning Heroes community may have. Hopefully, someone will have some recommendations for you.
If they had to use Storyline, then I think you'd have to leverage the web object feature and see if there's a way to embed a codable area into the slide. Otherwise, I'd say Storyline isn't the right product for this type of training.
I do agree with all that Storyline isnot the proper tool for this. However you can build sort of simulations of how code works and let users play around with the options in the code.
I did build several samples of GSAP code where the user can change something and the code will be executed.
The sample added in the post above shows that internally you can work with different variables being set in Storyline and then execute the proper function with 'eval(stringtoExecute);' in Storyline javascript. Purist in development probably will state 'eval' is a no-go zone, but it happens to be the only method to get things like this done in Storyline.
I created another design that does not use JavaScript. The issue was that the instructions said to create a code block that had multiple lines of code. Because Storyline evaluates the entry when the text entry field loses focus, the user couldn't enter more than one line of code on a slide without clicking off the text entry box to get Storyline to evaluate the entry.
I used a combination of freeform slides and plain slides that had text entry fields. Each slide is for one line of code. I added a Return shape on the slide that looks like a keyboard key. On the freeform slides, I changed the default Submit Button under Field to evaluate to the Return shape. The instructions tell the user to click the Return shape to create each line of code, but it's actually serving the purpose of removing focus from the text entry field. On the plain slides, having the user click the Return button ensures that the field loses focus (they could actually click anywhere on the slide to get this to happen).
On the freeform slides I set the feedback layers to hide when the timeline starts. I set Attempts to Unlimited.
Storyline evaluates each line of code before moving to the next slide, but the slide transitions are not apparent to the user. Nothing appears to change until they type the code correctly. When they type the correct entry, Storyline moves to the next slide, which shows the line they just typed and a new text entry field for the next line.
Because the user doesn't need to create another line of code at the end, I used a freeform text entry slide with the default settings. On this slide, the user can press their Enter key to have Storyline evaluate the entry.
Ingenious :-) One question though... if a user wants to delete a few entered characters... will the setup go back a slide when its a previous line ?
In another post a user had actually the same issue with textinput fields in a freeform question slide. Normal textinput fields do not have that issue, so you could use those and sent the final entered text to any given variable.
The user can use the slide's Back button to go back and enter something different.
The issue we had was that we could not create a variable with Enter or Shift+Enter, not that the user was unable to type multiple lines. The user can use Enter or Shift+Enter to create multiple lines in the text entry field, but Storyline will process the entry as incorrect.
In the freeform question, we could use Form view to paste in multiline code, but we could not add line breaks to it. It was very difficult to get Storyline to accept multiline entries as Correct.
I couldn't find any documentation that explains how Storyline evaluates the line breaks in the variable.
We also had to get the user to exit the text entry field so that the variable would change.
As i did some experiments with GSAP's SplitText to create animated lines and create text flowing around images, i discovered that there is a big difference in having the 'wrap text' option active or not. When inactive a block of text is 1 <tspan>, when 'wrap text' is enabled every line is a separate <tspan>. This ofcourse quite hinders scripting text elements in Storyline. That however has changed in an update. Now a textblock is changed in multiple lines of 'vector-text-item'. Whether 'wrap text' is used or not. Making it quite tough to work with text fields in combination with Javascript in Storyline.
Alternative version with a freeform multiple text entry question
I created another design that uses the freeform text entry question. The slide is created with a screen recording, but it also works if you create a freeform slide or create a slide and convert it to a freeform slide.
We used this slide to give the learner experience in typing code. It doesn't let them create their own code. When they type the code they are given and press Enter, they can move to the next slide.
The slide is basically a multiple fill-in-the-blank question.
I moved the default Text Entry field off the screen (the black shape in the following image). In the form view, I made the correct answer "Correct" and set the attempts to Unlimited. I renamed the variable to S2Correct only to help me keep track of which variable to use for the interaction submission. The correct answer and the variable name can be any text.
I disabled the trigger that changes the variable of the default Text Entry field to the typed value when it loses focus.
Then I created other Text Entry input fields for each line of code.
In the triggers, I set the S2Correct variable to change to Correct when the user presses the Enter key if the other variables have the code they're supposed to have.
In case you're wondering about the slide background, it's from the CodeSwing extension in VS Code.
12 Replies
I can imagine SL being the wrong vehicle for this for more reasons than you mention. I would give them a text editor (many free ones that are great, and are designed for those functions) and let them write and test web pages locally and live. You could use w3schools as a resource. They have a pretty robust testing capability. Cut out the fooling around with an authoring tool as a middleman. Of course, I'm a professional educator, so my opinion may be colored by pedagogical considerations.
Hi, Walt,
I agree about tool choice. Using Storyline is a client requirement :(
For other clients, we've used IBM Skills Network. It has a cloud IDE and other tools.
Hi Marianne,
Simulating code development sounds like an innovative way to use Storyline! I haven't come across any examples to share with you but the members of our very talented E-Learning Heroes community may have. Hopefully, someone will have some recommendations for you.
Thanks for reaching out!
If they had to use Storyline, then I think you'd have to leverage the web object feature and see if there's a way to embed a codable area into the slide. Otherwise, I'd say Storyline isn't the right product for this type of training.
I do agree with all that Storyline isnot the proper tool for this. However you can build sort of simulations of how code works and let users play around with the options in the code.
I did build several samples of GSAP code where the user can change something and the code will be executed.
https://community.articulate.com/discussions/building-better-courses/animate-storyline-groups-with-gsap
The sample added in the post above shows that internally you can work with different variables being set in Storyline and then execute the proper function with
'eval(stringtoExecute);'in Storyline javascript. Purist in development probably will state'eval'is a no-go zone, but it happens to be the only method to get things like this done in Storyline.Thanks, Math!
I created another design that does not use JavaScript. The issue was that the instructions said to create a code block that had multiple lines of code. Because Storyline evaluates the entry when the text entry field loses focus, the user couldn't enter more than one line of code on a slide without clicking off the text entry box to get Storyline to evaluate the entry.
I used a combination of freeform slides and plain slides that had text entry fields. Each slide is for one line of code. I added a Return shape on the slide that looks like a keyboard key. On the freeform slides, I changed the default Submit Button under Field to evaluate to the Return shape. The instructions tell the user to click the Return shape to create each line of code, but it's actually serving the purpose of removing focus from the text entry field. On the plain slides, having the user click the Return button ensures that the field loses focus (they could actually click anywhere on the slide to get this to happen).
On the freeform slides I set the feedback layers to hide when the timeline starts. I set Attempts to Unlimited.
Storyline evaluates each line of code before moving to the next slide, but the slide transitions are not apparent to the user. Nothing appears to change until they type the code correctly. When they type the correct entry, Storyline moves to the next slide, which shows the line they just typed and a new text entry field for the next line.
Because the user doesn't need to create another line of code at the end, I used a freeform text entry slide with the default settings. On this slide, the user can press their Enter key to have Storyline evaluate the entry.
Good job, Marianne. A good example of how creativity is more important than the design weaknesses or strengths of the tool.
Thanks, Walt! It's great to get ideas from this community.
Ingenious :-) One question though... if a user wants to delete a few entered characters... will the setup go back a slide when its a previous line ?
In another post a user had actually the same issue with textinput fields in a freeform question slide. Normal textinput fields do not have that issue, so you could use those and sent the final entered text to any given variable.
https://community.articulate.com/discussions/building-better-courses/function-keys-interactivity-in-storyline-using-javascript?page=2
Also she discovered that using shift+Enter does enable line breaks in all textfields.
Kind regards,
Math
Hi, Math,
The user can use the slide's Back button to go back and enter something different.
The issue we had was that we could not create a variable with Enter or Shift+Enter, not that the user was unable to type multiple lines. The user can use Enter or Shift+Enter to create multiple lines in the text entry field, but Storyline will process the entry as incorrect.
In the freeform question, we could use Form view to paste in multiline code, but we could not add line breaks to it. It was very difficult to get Storyline to accept multiline entries as Correct.
I couldn't find any documentation that explains how Storyline evaluates the line breaks in the variable.
We also had to get the user to exit the text entry field so that the variable would change.
As i did some experiments with GSAP's SplitText to create animated lines and create text flowing around images, i discovered that there is a big difference in having the 'wrap text' option active or not. When inactive a block of text is 1 <tspan>, when 'wrap text' is enabled every line is a separate <tspan>. This ofcourse quite hinders scripting text elements in Storyline. That however has changed in an update. Now a textblock is changed in multiple lines of 'vector-text-item'. Whether 'wrap text' is used or not. Making it quite tough to work with text fields in combination with Javascript in Storyline.
Alternative version with a freeform multiple text entry question
I created another design that uses the freeform text entry question. The slide is created with a screen recording, but it also works if you create a freeform slide or create a slide and convert it to a freeform slide.
We used this slide to give the learner experience in typing code. It doesn't let them create their own code. When they type the code they are given and press Enter, they can move to the next slide.
The slide is basically a multiple fill-in-the-blank question.
I moved the default Text Entry field off the screen (the black shape in the following image). In the form view, I made the correct answer "Correct" and set the attempts to Unlimited. I renamed the variable to S2Correct only to help me keep track of which variable to use for the interaction submission. The correct answer and the variable name can be any text.
I disabled the trigger that changes the variable of the default Text Entry field to the typed value when it loses focus.
Then I created other Text Entry input fields for each line of code.
In the triggers, I set the S2Correct variable to change to Correct when the user presses the Enter key if the other variables have the code they're supposed to have.
In case you're wondering about the slide background, it's from the CodeSwing extension in VS Code.