Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

turning javascript function into widget (sugarcube 2)

Hey everybody!

I have a very similar issue to the one I had here, where @TheMadExile exile helped me out big time, so I tried to follow his steps as exactly as I could.

So, I have a javascript function which takes an array as an argument and fills a <div> with the array's shuffled contents. User can drag and drop the array elements into another <div> and rearrange them. The moment the array has been put in the right order, boolean "orderCorrect" turns true.
The point of the thing is to have language students put a dialog in the right order. You can see a working example here: http://deutschdetektiv.net/exp/dialog.html

In order to use the function as a widget in SC 2, I took the following steps:

1. script uses jQueryUI, so I pasted jQuery UI into the Story javascript
2. below jQuery UI, I pasted the desired javascript function (http://deutschdetektiv.net/exp/assets/js/script.js)
3. CSS was put in the Story Stylesheet
4. In order to call the function and set up the necessary html, I tried to adapt TME's widget from the above mentioned solution:
<<widget "dialog">>\
<<script>>
shuffler(State.variables.args[0]);
<</script>>
<div id="dialogs_container">
    <div id="left_container">
        <ul>

        </ul>
    </div>
    <div id="right_container">

    </div>
</div>

<<button "Check">>
<<replace "#result">><<if orderCorrect>>wisely<<else>>poorly<</if>>!<</replace>>
<</button>> &nbsp; \
You chose… <span id="result">?</span>
<</widget>>

5. Widget was used like this:
<<dialog ["Hey Bill", "Hey Joe.", "Can you pick me up at the airport tonight?", "What time?", "I should arrive at 6.30.", "Can´t make it until 7", "Ok, I´ll wait for you until 7. See you later", "See you."]>>


I get an
Error [tw-user-script-0]: undefined is not a function.

I thought it might be something scope-related and called windows.shuffler, which also didn't work.

Could somebody have a look through the code?

Thanks in advance,

euba

Comments

  • A couple of suggestions:

    1. You may want to use SugarCube's own Array shuffle() function.

    2. You need to add a dollar sign to your orderCorrect variable.

    3. You may want to check that $args[0] actually contains a value.

    Something like the following, which has not been tested with your script.js file.
    <<widget "dialog">>\
    <<if $args[0]>>\
    	<<run $args[0].shuffle()>>\
    \
    <div id="dialogs_container">
        <div id="left_container">
            <ul>
            </ul>
        </div>
        <div id="right_container">
        </div>
    </div>
    
    <<button "Check">>
    <<replace "#result">>\
    <<if $orderCorrect>>wisely<<else>>poorly<</if>>!\
    <</replace>>\
    <</button>> &nbsp; \
    You chose… <span id="result">?</span>
    <</if>>\
    <</widget>>
    
  • edited October 2016
    greyelf wrote: »
    2. You need to add a dollar sign to your orderCorrect variable.
    They do not, actually. The orderCorrect variable is not a story variable, and there's no real reason for it to be in this case. The problem here is a case of scope. It's local to their script, so they'll either need to make it a global or use the setup object—in their last outing the similar wordOrderCorrect variable was already a global.

    greyelf wrote: »
    3. You may want to check that $args[0] actually contains a value.
    Beyond that, I'd suggest not mutating the $args array. Make a copy and mutate that.


    @euba25 Moving on. Your basic issue is that your script is evaluated completely at startup, when none of the elements you're looking for are on the page, among other problems. The solution will probably be the same as it was last time, judicious use of a task object.

    I have to go take care of some things right now, but I'll try to get back to this later.
  • Okay. I've attached a Twine 2 project archive—named Sentence Ordering—containing modified copies of your script and widget—mostly fixes and some cleanup in both cases. I made the widget capable of accepting either separate arguments or an array, so you'd have the option to use whichever you wanted—I'd suggest using separate arguments—and provided examples of both usages.
  • Thank you very much, TME, for talking your time again. It works beautifully. I´ll post a working example of both widgets here, so interested parties can see them in action.

Sign In or Register to comment.