How can I create/implement the distancing task in SoSci?

Question

I would like to use the distancing task for one of my study's in SoSci but I don't know how I could create it in there.
It's a task were participants see pictures of people and they can move that picture closer to them (the picture then gets bigger) or further away from them (the picture then gets smaller) to choose their preferred interpersonal distance to the person.
Do you have any idea how I could create/implement this task into my study on SoSci?

Answer 1

Puh - technicall no problem, if you get a bit into JavaScript. You could, for example, use a slider question and whenever the slider is moved, you can re-scale the image on the screen (maybe using a clipping so that only the person gets smaller or larger). If you need a bit help to implement this, please ask further questions in the online support.

Still, I see some methodoliogcal issues. I am thinking about different screen sizes and devices. Doing the same task on a 5-year-old smartphone will probably return other results then doing it on a 30'' 4K screen.

Comments

We actually found some nice instruction for a java script here:
https://www.tutorialrepublic.com/faq/how-to-increase-and-decrease-image-size-using-javascript.php

and implemented it this way - looks ok?

<script type="text/javascript">
<!--
function zoomin(){
        var myImg = document.getElementById("imagetest");
        var currWidth = myImg.clientWidth;
        if(currWidth == 700){
            alert("Maximum zoom-in level reached.");
            document.getElementById("DI04_01").value = (currWidth);
        } else{
            myImg.style.width = (currWidth + 20) + "px";
            document.getElementById("DI04_01").value = (currWidth +20);
            document.getElementById("PC01_01").value = screen.width;
            document.getElementById("PC01_02").value = screen.height;
        }
    }
    function zoomout(){
        var myImg = document.getElementById("imagetest");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
            document.getElementById("DI04_01").value = (currWidth);
        } else{
            myImg.style.width = (currWidth - 20) + "px";
            document.getElementById("DI04_01").value = (currWidth -20);
            document.getElementById("PC01_01").value = screen.width;
            document.getElementById("PC01_02").value = screen.height;        }
    }
// -->
</script>

<h2> How close do you want to be to this person? <br>
   Please adjust using the zoom buttons:
</h2>

<p>
    <button type="button" onclick="zoomin()">Zoom In</button>
    <button type="button" onclick="zoomout()">Zoom Out</button>
</p>
<img src="imagetest.jpg" id="imagetest" width="250" alt="testimage">

---

Yea, looks not bad. However, using a slider question and linking the zoom to that may be a bit more comfortable for the respondents: You could zoom faster and see the limits.