Is this doable? Or Can it be? JQuery UI in Chapbook

[everythingability]

I have previously done this with Sugarcube, but wonder if I can add jQuery UI elements, like sliders to Chapbook.

In my Javascript file I have...

` var script = document.createElement('script'); document.head.appendChild(script);
script.type = 'text/javascript'; script.src = "https://code.jquery.com/jquery-1.12.4.js";

//jQUERY UI script.onload = function(){ console.log("jQuery loaded"); var ui = document.createElement('script'); document.head.appendChild(ui);
ui.type = 'text/javascript'; ui.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"; ui.onload = function(){ console.log("UI loaded"); } }`

..which all loads fine, but I don't seem to be able to add < chars to my page, which is like this...

` slider: "

"

Let's Count Example

[Javascript] write(engine.state.get("slider") );

// Accessing jQuery, this works fine. write("There are : " + $("p").length + " p tags on this page");

write('2 + 2 is ' + (2 + 2) + '.\n\n');

for (let i = 1; i <= 10; i++) { write(i + ','); }

//var $div = $('

').appendTo('article'); //nope, I think < breaks it. //$div.attr('id', 'slider');

[cont'd]

Setting the Twine engine's state, and using JQuery

jQuery (and jQuery UI) has been loaded in the project's Javascript file - see in the menu bottom left in the Twine editor.

[JavaScript] //Changing a Twine variable let money = 4000; engine.state.set('money', money);

// Can you guess that I want to attach the slider to the engine var

$( "#slider" ).slider();

[continued]

Wow! You now have £{money}, maybe hacking does pay after all.

{back link}`

It's something to do with escaping/unescaping isn't it? Is it something that should be acheivable, or am I barking up the wrong tree?

I'd like to be able to make a "skills self-assessment game" ... with fancy UI to alter state vars.

[everythingability]

OK... It's now nearly working ... Go here, then click the Javascript link. https://www-users.york.ac.uk/~tas509/ExampleProjectMarionSparkle.html

So... whilst using Javascript seems possible, understanding how and when each rendering happens is where my issue is. So this isn't a bug, but a request.

• How might I use an onPassageLoad() function in order to apply a slider() call to it. My guess is that I can't do it in the project's Javascript because the slider div itself, is not yet rendered into HTML (it's waiting for when I get to the passage, right?) -How might I run code onPassageOpen() ? That would be the best place for it to be, but using jQuery to replace a
  tag, when it might not be there yet, because of the rendering order(s) might be the issue?
• Am I just barking up the wrong tree here? It'd be a shame... maybe I should be investigating write Twee code to generate sliders, tabs, accordions etc, rather jQuery? It's just jQuery is so good at it, and I would like to "gamify" quite dull experiences like self-assessment forms and Twine is GREAT at that... so much freedom.

My project's Javascript is:

`var script = document.createElement('script'); document.head.appendChild(script);
script.type = 'text/javascript'; script.src = "https://code.jquery.com/jquery-1.12.4.js";

//jQUERY UI script.onload = function(){ console.log("jQuery loaded"); var ui = document.createElement('script'); document.head.appendChild(ui);
ui.type = 'text/javascript'; ui.src = "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"; ui.onload = function(){ console.log("UI loaded");

    //
    var myfunctions = document.createElement('script'); 
myfunctions.type = 'text/javascript';
myfunctions.text = `

function showSlider(){ var s = $( "#slider" ).slider().on( "slidechange", function( event, ui ) { console.log("ok", ui.value); engine.state.set('money', ui.value);

        //config.header.right: "Wallet: £" + ui.value;
      alert( ui.value);
  } );

}

` document.head.appendChild(myfunctions);

} 

}`

...and my page's code is:

`# Using jQueryUI

jQuery (and jQuery UI) has been loaded in the project's Javascript file - see in the menu bottom left in the Twine editor.

Show Slider

`