Need help from JavaScript pros! [Twine 2 / SC]

euba25 · June 2016

Hey everybody,

lacking deeper knowledge of JavaScript I am facing a major problem here: For an educational game I want to include passages, in which the users have to drag and drop words into the right order. I found a script which covers about 90% of what I need, but I don´t know how to adapt it to make it work with twine / sugarcube.

I hosted an example here: http://deutschdetektiv.net/exp/put_words_in_order.html

Could anybody help making this work in Twine/SC?

I´d need the following changes:

I know this is a huge favor to ask, I can only hope that the feature might be handy for other users as well.

greyelf · June 2016

Your link is timing out so I am unable to look at the Javascript to see if I can help you.

euba25 · June 2016

Hey greyelf, thank you for offering to help. Time-out must have been due to server maintenance, works fine now,

best, euba

euba25 · July 2016

Hey everybody,

I thought I give it another try and paste the javascript and html here. I got the javascript issue figured out, I now have a "var corrects" which is either true or false depending on how the user dragged the words.

So here we go for the html:

<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>;
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>;
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
start();
document.addEventListener('touchmove', function(event) {
if (event.target.parentNode.className.indexOf('noSroll') != -1 || event.target.className.indexOf('noScroll') != -1) {
event.preventDefault();
}
}, false);
});
var content = "<p>1. Drag #the*words*into*the*correct*order.#</p>"
var correct = false;
</script>
</head>
<body>
<button onclick="alert(correct)">Test</button> 
<p align="center"><span style="visibility: visible;" id="correct">correct!</span></p>
<div id="container" class="noScroll">
</div>
</body></html>

The drag.js can be found here: http://pastebin.com/jUmqCKJP

Could anybody help me make this work in SC 2.6.2 in Twine 2? I'd like to be able to put the entire javascript in the story's JS-section and use the function in several passages.

Again the link to the example code: http://deutschdetektiv.net/exp/put_words_in_order.html

euba25 · August 2016

me again - I was wondering if maybe now somebody could give me a guideline on where to even start.

So my questions are:

1. I understand Sugarcube is based on jQuery. The above page also loads jQueryUI, so I thought I could just copy-and-paste the jQueryUI into my story´s javascript. Didn't work.
Which would be the best way to use jQueryUI in my story?

2. Where do I go from there? I guess I need to turn the javascript code (http://pastebin.com/jUmqCKJP) into a macro, so I can call it from the passages want to use the drag-and-drop-feature?

Any advice?

walker · August 2016

This is not the best solution but you can use a iframe, you have more then 1 file.
The files must be in the same domain.

In the passage:

<iframe src="proof of concept.htm" style="width: 100%; height: 500px;" ></iframe><span id="resultSpan"></span>

This in the Story Javascript:

window.top.testCheck = function(correct) {
	alert(correct);
	var res = window.document.getElementById("resultSpan");
	res.innerHTML = correct ? 'Correct' : 'Not correct';
}

I changed the code of the test button:

<button onclick="window.top.testCheck(correct);">Test</button>

It is important to add the function to the window.top
I tested it with SugarCube 1.0.34.

TheMadExile · August 2016

The only thing jQuery UI needed was to be pasted into the Story JavaScript.

On the other hand, the word ordering script. It pains me how many issues that script has. I fixed the most egregious syntax issues and a few other things—it's still pretty terrible though—as well as wrapping it up for use in a story format. The interface changed a bit. The cleaned up version was pasted into the Story JavaScript—after jQuery UI.

I'll attach an example Twine 2 project archive to this post—just import in into Twine 2.

PS: It's current set to use SugarCube (v1), so you'll need to change its story format to SugarCube (v2), if that's what you're using.

euba25 · August 2016

Thank you so much for having a look at the script, TME!

Could I bother you for some further guidance? For repeated use and smooth integration in the existing SC2 variables, I thought it best to turn the entire thing into a widget, e.g.

<<wordOrder "#How*is*the*weather*going*to*be*tomorrow#?">>

my go looks like this:

<<widget "wordOrder">>
	<<set $sentence to $args[0]>>
	<<script>>
	var jumbledSentence = state.active.variables.sentence;
	dragInit(jumbledSentence);
	<</script>>
	<p align="center"><span style="visibility: hidden;" id="correct">correct!</span></p>
	<div id="container" class="noScroll"></div>
	<<script>>
		var answer = wordOrderCorrect;
	<</script>>
	
	<<if $answer>>
		<<print "You chose wisely!">>
	<<else>>
		<<print "You chose poorly!">>
	<</if>>

<</widget>>

Twine says, "required #container element is missing", so I reckon it has to be prerended?

TheMadExile · August 2016

It worked for me, no errors. I'm unsure what you did wrong.

That said, you cannot base the status of static elements on an interactive one and it expect it to work. In other words, the following:

	<<script>>
		var answer = wordOrderCorrect;
	<</script>>
	
	<<if $answer>>
		<<print "You chose wisely!">>
	<<else>>
		<<print "You chose poorly!">>
	<</if>>

Is never going to do what you want, because it only gets evaluated at passage render time. The dragging script is interactive and based on player input, which only happens well after passage rendering has completed.

There are other issues as well, but they're of lesser import.

euba25 · August 2016

That´s weird. What I did was pack the above mentioned widget in a widget-tagged passage and call it from the starting passage using

<<wordOrder "#How*is*the*weather*going*to*be*tomorrow#?">>

That´s when I got the error about the container element.

Concerning the other thing, thx for the explanation. What I am having trouble with (among a lot of other things) is building a bridge between SugarCube and javascript.

In your working example you used an html button element to "alert" the return of a javascript function. Is there a way to do this from within a SugarCube <<button>> element? Like calling a javascript function, have the $variable set there and further process it with SugarCube only?

TheMadExile · August 2016

euba25 wrote: »
That´s weird. What I did was pack the above mentioned widget in a widget-tagged passage and call it from the starting passage using
<<wordOrder "#How*is*the*weather*going*to*be*tomorrow#?">>
That´s when I got the error about the container element.

I don't know why you received the error—it should not be possible with the widget you showed. The dragInit() function sets up a postdisplay task so that the word ordering code proper is only executed after the passage has been rendered and added to the page—which includes the widget's contents.

euba25 wrote: »

[…] Is there a way to do this from within a SugarCube <<button>> element? Like calling a javascript function, have the $variable set there and further process it with SugarCube only?

I'm attaching another example Twine 2 project archive to this post—just import in into Twine 2.

The included widget shows an example of <<button>> usage—it's also been updated for SugarCube v2.

I also made a few changes to the dragging script in this example—e.g. removing all references to the #correct container, since the code never modified it for whatever reason.

Howdy, Stranger!

Categories

Need help from JavaScript pros! [Twine 2 / SC]

Comments