Drag and drop sentence builder

Feb 03, 2019

I'm hoping someone can help me figure this out.

Attached is my file. 

I have set up word cards (these are PNG images) that can be dragged and dropped to build a sentence. When the words are dropped they appear on the next slide.

HOWEVER! I realized I have no way of knowing what order the learner will put the words in, therefore my solution of a variable change resulting in a text reveal might not work. 

Ultimately I would like the sentence they build to show up on the next slide as text (to hopefully be printed). How do I do that when the order of the words will be unknown (so I cannot put the text variables in order in advance).

16 Replies
Christy Tucker

Instead of using a single rectangle as a target, could you use one target for each word in the sentence? Each target would have a variable (word1, word2, word3 etc.). You could set the variables to change based on which image is dropped on them. That way, you can have a text box with %word1% %word2% %word3% etc.

It would be a TON of triggers, but it would work.

Zsolt Olah

Hi Jeni,

This example shows how to remember in what order users click on buttons (example #3). It creates a unique code as each button has a number (1,2,3).


With the same concept, you could have each image has an assigned word, and JavaScript would build you the sentence.

After looking at your example, it's more complicated because people drag the words out of order. So, a different solution may help:


Here's what need to know:

1. User needs to click on the submit button to run the Javascript. If you just use the menu and click the next page it won't work.

2. I set it up for three words: you, nice and want. You would need to do for the others:

create a variable for each word and follow the True/False triggers as you have on you, nice and want currently

Then, open the JS Trigger and change the following:

var images = "you|you|you.png,nice|nice|nice.png,want|want|want.png";

For each word, you'll have an actual word you want to see in the final sentence. Let's say spring. Then, you add a "|" as divider. Next, is the storyline variable that the program needs to check for T/F. Let's say spring_variable: "spring|spring_variable" (the variable can be the same word if you want). finally, the actual image name you're using: spring.png 

var images = "you|you|you.png,nice|nice|nice.png,want|want|want.png,spring|spring_variable|spring.png";

Why does it have to be somewhat complicated? The program looks for the images (spring.png) on the screen and determines the position on the page. That's how it figures it out what word comes first. That means, you can't have the same image twice. You had "you.png" twice, for example. I removed the second one. If you want a word twice, rename the second image to something else: you2.png and it needs a new variable as well, and your text would be: "you|you2|you2.png" (you is the word you see in the text, you2 is the variable, and you2.png is the image file.

Makes sense? 



Jeni Johnson

I thought of this as well and that is where I started (with individual boxes) but then I got to thinking that in this free form sentence building situation I would't know if a user would make a four word sentence or an eight word sentence. I may have bitten off more than I can handle. :)

Seemed like a fun idea at the time! 

Zsolt Olah

For each word, you would add two triggers like you have on "you". One trigger sets the variable true (when dragged on), the other sets the variable false (when dragged off). 

Other than that, you have the JS code when the user clicks on the submit. That's a one time JS trigger, you don't need to do anything besides adding the words. To make it more legible you can do this:

var images ="you|you|you.png";

images+= "," + "want|want|want.png";

images+= "," + "want|want2|want2.pgn"; 

etc. This way it's easier to see read your code. (Very first line has the var and comma. The rest has += and a comma. Illustration above if you want "want" to be on the screen twice. You'll need its own unique variable for T/F.)

Jeni Johnson

To make sure I understand...

First line is (I didn't see a comma?):

var images="you|you|you.png"; 

Then for EACH additional word (i'll probably have about 20-30) I would repeat the following:



When I'm finished I'll have a long list of the above code (20-30 lines)? 

Would you mind explaining exactly what the JS is doing? This helps me understand JS more. Thank you! 

Zsolt Olah

Correct. First line no comma.

var images="you|you|you.png";

This defines a new JS variable called "images". Just like in SL, it's a variable that holds text.

The rest of the lines:

images+= "," + "..."

is short for images = images + "," + "..."

Which means adding more and more text to the original value. 

So, for example 

var mytext = "Hello";

mytext += "," + " this is Zsolt!";  

would create: "Hello, this is Zsolt!" text that the mytext variable holds.

Jeni Johnson

Thank you, 

I'm going to type up that script tonight and see if it runs. I'll let you know if I encounter issues (which I'm sure I will!). I appreciate you troubleshooting this with me.

JavaScript is sort of fascinating to me. So, by running this how does it work exactly? How is it able to put the words in any order?

Zsolt Olah

So, I typed up this long long explanation of how it works and then I got error message and all gone... I'll send you an email instead. But check this example.

I made some changes. 

1. Added the missing part of the JavaScript code (you did a good job with the images+= part but you also need the rest of the code I included)

2. Added a trigger to move to the next slide when user clicks on submit

3. Removed the "a == True" condition from the Submit button. You don't need that.

4. Created a variable called Sentence. That's going to hold the sentence on slide 2. 

Jeni Johnson

Yes, I can see this one and it works perfectly! What is different in this one (is there a way to download the file)?

I also noticed that if I dragged four words to the box, then removed one before hitting submit the original four words still appeared in the finished sentence on the next slide. So it seems that the script remembers ANY words you put in (even if they are removed prior to hitting submit). I don't know how the script works for it to do this. 

Zsolt Olah

Jeni, here's your final product with letters.

Answer to your questions: each letter needs two trigger on it. One that sets it true when dragged and one that sets it false when it dragged off (in other words the intersection ends). Now it works well.

You can post it to the Valentine board :) I'll add this to the project 99 site. It has good lessons learned for others. 

If you add any new words, remember to do these:

1. Create a variable for the word

2. Add a new line in the JS with the word in the images. I made a slight change how it works. IF the variable name, the text and the file are the SAME (like a|a|a.png) you only have to use the first and leave the rest empty: a||

3. Add two triggers on the letter: set the variable true when dragged on, set the variable false when intersection ends

4. Don't forget to add the letter to the drag and drop exercise: Form View and select the as draggable item to the Dropbox.

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