I'm using Gorilla Experiment Builder for an online experiment.

I'd like to record the coordinates for 6 zones (containers) into my data.

The zones all begin in the center of the screen (positioned relatively) and then are respositioned into a ring on the screen (see code).

How do I create some variables (Zone1_X and Zone1_Y, etc) that give me the NEW coordinates of each 6 zones?

if(row.display == _requiredRTDisplay){
        if(screenIndex == _requiredRTScreen){
        $(window).resize();
        $('.response-main').css('display', 'flex');
        $('.gorilla-content-image').css({top: 'auto', left: 'auto', margin: 'auto'}); 
        // create variable for pixels per degree
        
            var PxPerDeg = gorilla.retrieve('pixels_per_degree', null, true)
          //console.log(xPxWidth); 

            //find each zone
            var Zone1 = $(container + ' .Zone1');
            var Zone2 = $(container + ' .Zone2');
            var Zone3 = $(container + ' .Zone3');
            var Zone4 = $(container + ' .Zone4');
            var Zone5 = $(container + ' .Zone5');
            var Zone6 = $(container + ' .Zone6');

            // find each image within each zone

            var allZones = $(' .Zone1,  .Zone2,  .Zone3,  .Zone4,  .Zone5,  .Zone6');
            var allZoneImages = $(' .Zone1 .gorilla-content-image,  .Zone2 .gorilla-content-image,  .Zone3 .gorilla-content-image,  .Zone4 .gorilla-content-image,  .Zone5 .gorilla-content-image,  .Zone6 .gorilla-content-image');

            allZones.css({top: 'auto';left: 'auto', width: '100%', height: '100%', margin: 0});
            allZoneImages.css({top: 'auto', left: 'auto', margin: 'auto', width: (mainStimuliWidth * PxPerDeg), height: (mainStimuliHeight * PxPerDeg)});

            // create positioning variables 

            var Position1 = -(10 * PxPerDeg).toString();
            var Position2 = (10 * PxPerDeg).toString();
            // reposition zones

            // timeout 
            
                Zone1.css('top', Position1 + 'px');
                Zone2.css('top', Position2 + 'px');
                Zone3.css('top', (Position1 / 2) + 'px');
                Zone3.css('left', -(Position1 * .866) + 'px');
                Zone4.css('top', -(Position1 / 2) + 'px');
                Zone4.css('left', -(Position1 * .866) + 'px');
                Zone5.css('top', -(Position2 / 2) + 'px');
                Zone5.css('left', -(Position2 * .866) + 'px');
                Zone6.css('top', (Position2 / 2) + 'px');
                Zone6.css('left', -(Position2 * .866) + 'px');
                
                
            
              
                
             

        }
    }