This is a great script. I am wondering if there is a way to make it so that the image resizes when in mobile mode?

The attached sample survey IS responsive to screen width.

The attached sample survey IS responsive to screen width.

What I am wondering is, how do you analyze such a survey, where you register positions on an image via coordinates, but the image can have different sizes, depending on the resolution / view port.

I am not very good a reading JS code. Does the script record this?

In any case, you would need to analyze the results on a case by case basis, because the images might be totally different for any of the responses.

The coordinates are in percentages of width/height and based on the center of the dots, so image size is irrelevant. I suppose you could also put in media queries to reduce the size of the dots on smaller screens but I don't see the point.

The coordinates are in percentages of width/height and based on the center of the dots, so image size is irrelevant.

Great. That solves the problem of images not being the same size! Thank you for clarifying.

So in your example from the screenshot, Position 1 reads as 6.69% from the top, 17.81% from the left.

Yep, the coordinates are relative to the top-left corner of the image.

Hi,
the provided solution works like a charm.

BUT: In a new survey the client would like to see markers in two different colors (e.g. green, red) to be able to mark positive points and negative points.
Something like: left click: green, right click: red.

And furthermore there should be a comment field for each marker. where the respondent explains why he selected this part (positive resp. negative)

Well, because Tony provided this solution this post is more or less addressed to him.


I attach a screenshot of a solution of IFAD CIS.
www.ifad.de/software/befragungssoftware-cis/?lang=en www.ifad.de/software/befragungssoftware-cis/?lang=en

In my case the comment field can be below., but the important thing is that the respondent can see the connection between marker and field.

Best regards
Joffm

Hmm...that'll take some time to develop.

It's interesting that the linked example doesn't work on smartphones. Do you need it to be mobile-compatible? If so (and maybe regardless of that), I would suggest dragging into position instead of clicking - the right-click (tap and hold) on phones is not intuitive to many.

Regarding the comments, can you get away with a single-line input (<input type="text">)?

Hi,

some feedback:

Yes, you are right about smartphones: The developers of the example say "It doesn't make sense on smartphones".

So, if you have any ideas you are absolutely free in design.

The need (the wishes) are:

• two different markers (positive vs. negative)
• comments related to each marker
• if I remove a marker the comment is removed as well
• Single line for comments is fine.
• Doesn't matter where the comment is displayed. Can be below the picture.
• smartphone not absolutely required.

The "nice to have" are:

• Multiline comment
• smartphone enabled

Thank you in advance

Joffm

My thinking on the single-line input is that we could use a multiple-short-text question for the good/bad values, the coordinates and the comments. That way we could roll it into a custom question theme containing all necessary scripts and styles.

Hi, Tony,

sounds good.

Are you able to do it? Unfortunately I am not.
I am good at many things, but neither familiar with JS nor with the custom question themes (which I hope to learn some day).

Kind regards
Joffm

Yes, I can probably do that but it will take some time.