Nice start, Martin. A few thoughts if you want to keep at it:
* If you're not already familiar with it, I would recommend familiarizing yourself with common formatting practices in programming. There are free formatters (or "beautifiers") you could run your JavaScript through if you want. After doing this, I was able to see two typos in your code: your "if" and "else if" lines have two open parens but only one close paren.
* If you look in your browser's console on this page, you'll likely see an error coming from your "SSI_GetValue" line. It's great that you're using Sawtooth Script to handle the question name, but be sure to remember to surround it with apostrophes or quotation marks if the value is going to be text.
SSI_GetValue('[% QuestionName() %]')
* We could discuss document.ready if you want, but the long story short is that you should keep the first use and remove the other two. The contents of your "if" and "else if" should just be the code you want ran and nothing else.
If you're in a hurry, though, here's my take on the task at hand:
<script>
$(document).ready(SSI_CustomGraphicalRadiobox);
function SSI_CustomGraphicalRadiobox() {
// Parameters
var show = {
0: [1, 2, 11],
1: [1, 2, 11],
2: [1, 2, 3, 7],
3: [1, 2, 3, 4, 5, 6],
11: [1, 11, 12, 16]
};
// Run
$('#[% QuestionName() %]_div .clickable').hide();
var resp = SSI_GetValue('[% QuestionName() %]');
show[resp].forEach(function(item){
$('#[% QuestionName() %]_' + item).closest('.clickable').show();
});
}
</script>
You can expand lines 7-11 with your visibility requirements. I'd be happy to answer any questions on how this code works.