Differences between default and custom Radiobuttons

As im working on a scrollable dynamic quiz template im using radiobuttons for the questions.

I have this script that makes it possible to select a default radiobutton by Javascript. Thus giving me the possiblity to make it work exactly as i want.

var arrayRAD = [];

$(".rad").each(function() { 

var myId = this.id.substr(4);

arrayRAD.push(myId); 

}); // gets all radiobuttons with class rad

var numRAD = arrayRAD.length;

changeRadioboxImage(arrayRAD[0]);

function changeRadioboxImage(_num){

$("#rad"+_num, getDisplayDocument()).prop('checked', 'true');

}

That works perfectly for the default radiobuttons. In a question or standalone.

The moment i use custom radiobuttons.... either some of those in the library or by uploading images...the script doesnot work anymore.

In what way are custom radiobuttons treated differently then the default ones ?

I did notice the custom ones use a background image of the state and they change whenever clicked upon them. Do the default ones work differently ? And how to fix that :-)

Discussion (5)

I posted so others might know there is a way without JavaScript.

You can look at the JavaScript it produces in the page it might give you an easier way to implement.

Always good to solve, at least partially, your own questions.

So basically the custom radiobuttons change the background image when clicking it.

So in the above shared samples for my buttons a script like this works.

document.querySelector("#tobj58 > div > label").style.backgroundImage = "url(images/active.png)";

Not that this is complete yet, because it only is a visual effect. Need to figure out how to really activate a custom radiobutton...

I'm sure you already know that you can use a

Change Contents action

to set a

Radio Button

or a

Checkbox

, or a

Question

, and when that is used it will update the visual part of the control as well. I thought I would mention it in case others are not aware of how easy it is to do.

Yes, doesnot directly solve my issue...or is there some javascript call for 'Change Contents' ?

For ease on testing this i add 2 packages. One with default rbs and one with custom ones.