Dropping text to fill in blanks within a paragraph

Apr 15, 2018

I am trying to make a quiz that is a kind of fill in the blank, but I want the users to be able to drag and drop text choices into blank spaces. I don't want users to type in any responses. The choices are on the slide, below the paragraph of text they need to fit into.

I set it up as a drag & drop freeform question, using target rectangles that cover up words in the main paragraph. This works fine except that you can guess which text choice should be dragged onto which target rectangle based on the width of the "missing" words.

Can anyone suggest a way to have all my target areas the same size within the paragraph so users can't guess the right answers based on the width of the text? Ideally when the choices are dropped on their targets, the underlying text block would dynamically rearrange itself to allow room for the answers.

Any hint about this or something similar would be appreciated.

10 Replies
Joshua Crigger

Hey Charles,

This sounds like a fun challenge. I have a few thoughts here but none of them really hit the nail on the head from what I can see.

Option 1: Instead of covering up the words in your paragraph you can replace them with a number of underscore symbols equal to the largest number of characters in your largest word option. This would allow uniformity in the size of blank spaces. When you drag your words over you can simply set them to center and it wouldn't look bad. 

Option 2: You can create variables for each blank space in your paragraph setting the value of the variable with the number of underscore symbols equal to the largest number of characters in your largest word option. Then you can set up a trigger which updates the value of the variable to the text of which was dropped into the Hotspot. This would allow for the paragraph to adjust to fit the word that was dropped in.

The issue I am seeing with this option so far is that due to the nature of the text moving with each variable being updates you will also need to find a way to readjust the position of the Hotspots to ensure they continue to overlap the blank spaces in your paragraph. This is where I am a bit stuck.

This option would work great if you were working off of buttons instead of a drag and drop system but I understand if you prefer the drag and drop interaction as it's very interactive and makes sense here.

Maybe this will get your creative juices flowing once again and lead you to success in your project. Happy to help further as well and will pop back in if I think of another option for you.

Also, I am happy to create a video to walk you through any of my thoughts if you are a visual learner or would find that helpful.

Cheers!

Walt Hamilton

Here's a sample that may give you a start. Alternatively, I think it might be easier to display the paragraph as a text variable, and change it with javascript.

You would use "___" for the blanks, and pass a variable to the script to indicate which instance of "___" to replace. Another variable would pass the new text.

Charles Radanovich

Thanks Walt, As a relative newcomer to Storyline, this is a bit baffling to me. I see what you are doing with the various states, but as I have 3 correct correct choices and 3 incorrect choices, I think the number of states would go to 9 for each if Im understanding your example correctly. I would also need to give users a 2nd attempt to get the answers right.

Your suggestion re javascript is interesting, but I've never worked with it and it might be beyond my skill set without a sample to dissect. If I used the javascript approach, would that be built in to Storyline so the users would be able to see it the way I set it up or would they need javascript enabled on their local computer?

By way of background, I am not a programmer -- my background is strictly high-end powerpoint.

Thanks for your help, I appreciate it.

Charles Radanovich

Thanks Joshua for your ideas. They are helpful.

I had been thinking about something like your option 2 using the same size target rectangle for each choice. I'd keep the rectangles showing which in this case is fine from a design perspective. The drawback is the shorter answers will appear very loose in the wider targets, but I think my client will be happy as long as the answers are not obvious to their users.

I am new to Storyline and while I'm managing fine in most things, when it comes to variables I am totally lost. I am a long time PowerPoint person, so I've never had to code anything like this before. I like the program in general but I do fine aspects quirky and cumbersome.

Thanks again, Chuck

Joshua Crigger

Hey Chuck,

Welcome to the community and a delight to help! I am new to Storyline as well and have been loving it!

You seem like a brilliant man so don't be scared of variables. It may be a new concept but one that can be grasped and powerful once you get the concept. If you have ever used mail merge in excel it's a very similar concept.

There is actually an amazing article here which will walk you through step by step on how to use variables in Storyline360 and how they can be so powerful. 

Reach out if and when new questions arise!

-Joshua

Walt Hamilton

but as I have 3 correct correct choices and 3 incorrect choices, I think the number of states would go to 9 for each if Im understanding your example correctly. I would also need to give users a 2nd attempt to get the answers right.

Absolutely, and if I were doing it, I would start a new text segment for every two, or at the most, three answers. As for a second chance, either you revert to a state with the correct attempts filled in, or a completely blank state.

If I used the javascript approach, would that be built in to Storyline so the users would be able to see it the way I set it up or would they need javascript enabled on their local computer?

The ability to  parse javascript is built into web browsers, so that part isn't a problem.

In reality, part of the purpose of my sample is to show that it can be done, but it's up to you to decide if you can and want to commit the resources to do it that way.

As to variables; My cat has two neurons, and when they get separated, he sits in the middle of the floor with a confused look on his face. Once he locates them and gets them back beside each other, they fire, and he can remember where he was going and what he was doing. Computers are like that, except they only have one neuron, so they can only keep track of one thing at a time. So somebody (I think it was Jacquard or maybe Vaucanson) developed a system of sticky notes, so they can keep track of where they are and what they were doing.  You just write that in a variable, and when it needs the information, you look in the variable.

If you go that route, you would display a variable (VariableX), and use javascript to change it, rather than using states.  The display would be a text box with a reference to Variable X (%VariableX%)

Charles Radanovich

Hi Walt, I love your cat analogy.

My cat is often confused. When his neurons realign, he jumps straight up in the air and starts running furiously throughout the house. Maybe he could use some sticky notes too, but he hates it when I stick them on his nose.

I've saved your example which works well.  I'll go back to the problem to see how I can adapt your solutions to a similar challenge. For now, I've taken a less elegant approach but my client is happy.

Thanks again,
Chuck

This discussion is closed. You can start a new discussion or contact Articulate Support.