Drag and drop sentence builder

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.

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).

https://www.rabbitoreg.com/examples/p99/#/lessons/XZ2WlxtSOYRPyO8PnifZaPMO89qVeLNC

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:

https://360.articulate.com/review/content/13b993eb-c233-47c6-a5d6-0832b93f176c/review

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? 

Yes, this makes sense. I was thinking JavaScript might need to come into play and I'm very new to that. I want to see if I understand correctly, if I have 30 words on the page for example, the JavaScript string would need to include all 30 words? And I create a JS trigger for each word?

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! 

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.)

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:

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

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! 

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.

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?

I tried with the JS and I must still be missing something because I can't get anything to work. 

I set up the JS for the words a, and, are, babe, be (but only practiced a fully done trigger on the word "a"). 

What am I missing?

Thanks!!! 

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. 

I figured it was something I was missing in the code. I followed your above directions but didn’t realize there was more code. I looked at the exact code on your example story but realized I don’t know anything about JS and couldn’t make sense of it (wish I could)! :) 

Mmmmm...I checked this out and I can only get the word "a" to appear, even though the other test words are listed in the script.

Am I missing something else?

Do you have access to see this? 

https://360.articulate.com/review/content/1ee582a1-1f53-4776-9fde-0beae746509e/review

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. 

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.

Thanks! I'll test it out tonight.