Develop Reference

How to fill in Google Form's drop down and text inputs with Tampermonkey?

I am trying to automate an attendance form hosted by Google Forms, but the inputs aren't HTML <input> or <select> elements, so I am not sure how to change them other than manipulating the mouse and keyboard (an approach I used with Selenium).

Based off a fast peak; you could
let Form = document.querySelector('.freebirdFormviewerViewItemList');
let itemContainer = Form.querySelectorAll('.freebirdFormviewerViewNumberedItemContainer');
itemContainer.forEach((element)=>{
// Your code here, you should in theory be doing deeper loops depending on how advanced you want this.
});
Inside the loop we'd need to just find all the active inputs we want with a
itemContainer.forEach((element)=>{
if(element.querySelector('.exportOuterCircle')) {
console.log('we found ourselves a radio button but just one, we could go deeper with querySelector (and help of loops/etc)')
}
});
This is a bit of a large-task but not so bad, just make sure the freebirdFormviewerViewNumberedItemContainer class is correct every-form to or y ou find the pattern per-page that selects the questions for a fast loop through.
On loop, you're to query select one or more(if so apply another loop) to find the options you want. In this demo above radio button search, if the pages stay static you should with my example be able to grab/see a console pop-up no errors;
For setting these values, it's as easy in some cases setAttribute/value/ and other modifiers once selection is made. So you know click already and so the radio buttons be a good example. Any issues try navigating your elements in developer menu and sort if selections are going down correctly.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Trigger Dynamic Actions from a JavaScript Animation in Oracle APEX

Hello fellow developers.
I am working with Oracle APEX. I have found a pretty beautiful JavaScript library about animation and I would like to use it in order to make my application more beautiful and to show the user the path in order to make some configurations in the database.
The library that I have found is called JIT (https://philogb.github.io/jit/demos.html) and I would like to use this instance: https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html.
After I implement the animation in APEX I would like to add some dynamic actions. For example every time one node is being clicked, a different region underneath the animation is being displayed and the other sub-regions are being hid.
Until now I have uploaded the JIT library and the JavaScript code that contains the Events and the functions about the animated tree in the shared components of my application. Also I have managed to display the animation in the Oracle APEX page, through an HTML code. I caught the Event that is happening whenever one node is being clicked. I have created also one dynamic action on a Region, and with this dynamic action I would like to show this Region. And every time, one different node is being clicked this Region is getting hidden. The dynamic action I have created has the existing attributes:
*Event ='Change'
*Selection Type = JQuery Selector
*JQuery Selector = $("#P5_NAME").val('INAS006E ');
,where P5_NAME is a field that I store in the JavaScript code the name of the node that is being clicked and 'INAS006E' is the name of one specific node.
*Action = Show
*Selection Type = Region
*Region = Test JS
, the name of the region that I want to display.
The biggest problem that I don't know how to overcome is, to pass the variable in the JavaScript code, node.name, in the Oracle APEX in order to trigger the dynamic actions.
Here is the Event that is being triggered where one node is clicked and where I store the node.name.
onBeforeCompute: function(node){
Log.write("loading " + node.name);
alert(node.name);
$("#P5_NAME").val(node.name);
},
In conclusion, I want after one node is being clicked, one region is getting showed after I click one the next node, the previous node is being hid and another one is coming up. But in order to do that, I have to pass the variable from JavaScript code into Oracle APEX.

I have managed to solve this problem after a lot of testing and searching.
The truth is that the answer is simpler than I expected. All I had to do, is to change a little bit the code of the function, that is being triggered. The correct function is:
onBeforeCompute: function(node){
Log.write("loading " + node.name);
alert(node.name);
$s("P5_NAME",node.name);
},
The $s("P5_NAME",node.name) sets the value of textfield P5_NAME with the name of the node.

Aurelia JS - multi level binding/update?

I'm not sure whether I'm using the right terminology here - but here is an example:
https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55
This is how it looks like in Chromium:
Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.
Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.
The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.
My original question (which is why I started this post/example at all), was:
How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?
... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...
After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?
The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?
And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?

Boy, this was a pain, but here's what I think is the solution:
https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04
Here are some notes:
Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
Once we have a reference to the widget, re-apply it on each second level element, whenever they change
Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed
Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...
Though, would still love to know what is the proper way to do this...

Set focus of codemirror instance based on container

I have multiple instances of codemirror running on my page. Some are hidden and you can move between them using tabs. What I would like to do is be able to set the focus based on the container.
At some point the instance was initiated like this:
var cmInstance = CodeMirror(target, options());
So I would either like to be able to get the instance that was initiated on that container by using the container, something like:
cm = target.getCodeMirror();
or perhaps set the focus based on the container, something like:
target.setFocus();
Is anything like this possible or should I rather keep a record of individual instances in an array or something?

Okay so I opted to track my instances of codemirror in an array and address them based on an ID that I keep track of and link to the target. Once I have my instance I can just set focus using the codemirror method cmInstance.focus();
Currently I feel this is the best solution.

Jquery adding and removing multiple Image layers on div

I have a problem of finding the right function , or logic to resolve this problem for adding layers to a div (transperant png).
This is a part of a "configurator" for potential products.
semi-working demo (shirt example) can be find here :
http://jsfiddle.net/obmerk99/9t4f4/16/
If I will use append() - like you can see it commented out in the code - it will append endlessly - how can i remove the previous option (from the same option group only)
1 - What is the right function to use here ?
2 - How can I make the "groups" division without resort into multiple dedicated divs (i will have 50-60 options..) - or in another scenario, how to create those automatically ?
3 - How to make it work for radio / checkboxes ??
EDIT I
Lame´s word explanation :
I have "groups" of options, all referring to the same product.
Each group "option" corresponds to a transparent png with the option´s image or respective part.
Foe example, if i configure a car, I will have a group of "wheels" options with images of different wheels, a Group of "windows" options with different windows , a Group of "color" options etc. etc...
In the end , they stack up and make the complete image - configured.
It is a bit like those sites making avatars, or cartoonish images where one can choose head, muctache, background, glassess, hair etc.

Maybe you can have a main image showing what never changes, on top of that have an image for each option, the images could be in the markup or added when the option is first selected.
Here is a mod to the fiddle, I think its what you're trying to achieve fiddle I added an overlay image and span for each option.
EDIT:
Automating the switch would be trivial, just give the display and information elements ids ending in the element that affects it
E.g.
<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">
see fiddle
I think you should use radio buttons(if you don't want to use the select) instead of the check boxes because they can be grouped easily.
see fiddle

I've had to do this before while generating an avatar image with data pulled from an MMO game site. I used PHP and the GD library to generate an image on the fly with all of the necessary pieces (including different variations of color) and then cached the generated image so that subsequent calls for that same configuration would not have to be regenerated. Eventually every possible configuration of the avatar was cached and the image generating script became obsolete.
Maybe you could use this same technique or simply generate every possible image up front allowing Jquery to pick and choose based on selected options? The only other option I can think of would be to use Flash or HTML 5's canvas element.

Try following code for JS code commented by you
$('#prod').empty().append('<img id="prod-image" style="z-index:1;" src="http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png"/>').append('<span id="collar"><img style="z-index:2;" src="'+data[value].img+'"/>Control Text : </span>');