Loading Different SVGs in the same question based off of other answers (Cascading Select)

[AlfredBaldenweck]

I'm looking at trying to create a survey using SVGs for the user to input their location.

I would like to do something where the SVG shown changes depending on the answer to another question. So, for example, if in the answer to "What State are you in?", you pick "Alabama", an SVG showing Alabama broken up by County shows up, and the same if you choose Louisiana, etc.

For the sake of convenience, I'd prefer these to be all the same question; the alternative would be creating a new set of questions for each state and then having that answer passed to a Final Data field, which could get pretty gross if I were, for example, going to use all 50 states.

Is this possible?

On a related note, is it possible to make the SVGs shown in Survey123 bigger? I've resized them already and they stay the same size in the survey itself. Is there a way to make that space larger?

Thanks!

Update 8/26/21

I ended up just making multiple questions for each SVG, and concatenated all to a final data field.

[BrettStokes · Accepted solution]

Hello @AlfredBaldenweck ,

No - it's not possible to do this in one question. Is sounds like you're already using the solution I would recommend (multiple questions). The main limitation is that the `media::image' column in the XLSForm does not accept variables (you can't set the svg image filename based on a previous question). Even if this was possible, your choice list would get mesy - it would need to contain all counties for all states (in your example scenario) with a choice filter set up.

The scaling of the SVG in the form depends aspect ratio of the image and the device you're viewing it on. For example, a short & wide image would fit better when viewing on a desktop (or tablet in landscape orientation):

compared with a phone (you'll get white space top and bottom):

If you know what device(s) your survey will be used on then you can design your svg file accordingly. Otherwise I've found it's best to have a roughly square aspect ratio for you svg to work best on all devices.

Hope this helps,

Brett

[AlfredBaldenweck]

Thanks for the response, Brett.

I was hoping that maybe the question-height parameter would do the trick, but it looks like it's not applicable. 

Continuing the States example, the SVGs in question aren't really able to be edited without losing their geographic meaning, so I'm kind of stuck with what I have, and am running into the issue of some "counties" being too small or thin to be easily selected. In my particular case I have data validation set up further in the workflow, so selecting a bunch of options by blindly clicking in order to get the right ones is a set-up that works, since the wrong ones will be filtered out later, but it isn't ideal.

I was able to make one of them be more viewable by rotating it, but a lot of the geography I'm using is close to being square, so turning it on its side doesn't help much.

I think having some sort of pop-out capability could be a good way to get around this, similar to clicking on an image for a preview. So the entire screen would be filled with the SVG, you make your selection(s), and then go back to the main page of the survey. Otherwise the SVG is stuck at a maximum of around 750 pixels high, based on what what I've been seeing (On desktop, in the preview and in the published survey). You can scale down, but not up.

Thanks again

[AlfredBaldenweck]

I ended up working around the issue by copying the question, and changing its choice filter to also include

and (not(selected(${Original Question}, name)))

which shows all the relevant choices that you have not selected in the other question. The not() must be inside parentheses or else  any other parameters in your choice filter will be ignored. 

I also set up a toggle question so that this question is not visible unless you need it, and I set up another question to concatenate the two together, which will be used for further in the workflow. It's not ideal, but it works.