Modify markers in Visual Placement question

Question

I have created a question Visual Placement and assigned the image of the concentric circles, then I added six markers - so far so good. However, I was wondering if there is a way to modify the inserted markers:

Basically, is there a way to create subcategories of markers to group them - let's say as an example, I would like participants to - on the same circle - mark importance of friends/family/neighbours as well as importance of activities, i.e. sport/cooking/movies. This would require me to modify the positioning of the markers, maybe ability to group them closer and add a title, as well as randomize them within their own categories.

I have managed to subset and randomize the first three markers by doing this:

$items1 = random_items('1-3');
question('C101', $items1);

This gives me the image, along with the first three options, randomized; I can also array_merge a second subset of randomized markers to this question, however, then it presents them all to me directly underneath each other. When I call the second set with the question command, it (of course) calls the entire question again, and I couldn't figure out how to blend out the image.

Thanks for your help!

Answer 1

This would require me to modify the positioning of the markers, maybe ability to group them closer and add a title, as well as randomize them within their own categories.

These are features that are neither available nor planned in the visual placement question. The goal of that question is to mark position on images.

The idea of using it as a modified slider is not bad, but not the function that this question was written for. I can, of course, help you with some modification using JavaScript and CSS, but I do not expect that this will result in a question that is really optimal for your task.

however, then it presents them all to me directly underneath each other.

The symbols on the side ("legend") have IDs such as "legendAB01_01", "legendAB01_02", given that your question is AB01. You can add CSS code to add some space between your groups:

pageCSS('
  #legendAB01_02 { position: relative; top: 0 }
  #legendAB01_02 { position: relative; top: 20px }
');

Or you can also do this in JavaScript:

<script type="text/javascript">
document.getElementById("legendAB01_02").style.position = "relative";
document.getElementById("legendAB01_02").style.top = "30px";
</script>

To get that working with randomization, you simply loop through your arrays and calculate the positions (simply add 30 pixels for every option, and another 30 pixels when a sub-group ends). To make that work then, you will have to place them with position: absolute. And you will have to define the width as well.

Using JavaScript, you can also add more text, using createTextNode()and addChildNode() to the parental element of the above mentioned elements.

Again, I am not sure, if the visual placement is the best solution for your task. If you would like to elaborate a bit more on what you're trying to accomplish, I will spend a bit time on thinking about other options.