Sexual Ecologies Diagram

by jude_pinto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>



<button id= "button_E">Reset
</button>
<ul>

<div id="container_1" class="resize-container_E">
  <span class="heading"> Gender/Sex Eroticism </span>
  
  <div id="Porn_E" class="resize-drag Porn_Ec">
  
  <span id="Porn_Ea">Porn</span><span id="Porn_Eb">50%</span>
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 resize-handle" role="img" xmlns="http://www.w3.org/2000/svg" width="840.000000pt" height="880.000000pt" viewBox="0 0 840.000000 880.000000"
 preserveAspectRatio="xMidYMid meet">><g transform="translate(0.000000,880.000000) scale(0.100000,-0.100000)">
<path d="M200 4400 l0 -4000 4000 0 4000 0 0 320 0 320 -3680 0 -3680 0 0
3680 0 3680 -320 0 -320 0 0 -4000z"/>
</g></svg>

  </div>
  <div id="Fantasy_E" class="resize-drag">
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 resize-handle" role="img" xmlns="http://www.w3.org/2000/svg" width="840.000000pt" height="880.000000pt" viewBox="0 0 840.000000 880.000000"
 preserveAspectRatio="xMidYMid meet">><g transform="translate(0.000000,880.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M200 4400 l0 -4000 4000 0 4000 0 0 320 0 320 -3680 0 -3680 0 0
3680 0 3680 -320 0 -320 0 0 -4000z"/>
</g></svg>
    <span id="Fantasy_Ea">Fantasy</span><span id="Fantasy_Eb">50%</span>
  </div>
  <div id="In_Person_E" class="resize-drag">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 resize-handle" role="img" xmlns="http://www.w3.org/2000/svg" width="840.000000pt" height="880.000000pt" viewBox="0 0 840.000000 880.000000"
 preserveAspectRatio="xMidYMid meet">><g transform="translate(0.000000,880.000000) scale(0.100000,-0.100000)"
fill="#000000"...

CSS

.resize-drag {
  /* shape parameters */
 border-radius: 50%;
  width: 212px;
  height: 212px;
  min-height: 1px;
  min-width: 1px;
  max-height: 300px;
  max-width: 300px;
  padding: 0px 0px 0px 0px;
  margin: 90px 90px 90px 250px;

  
  align-items: center;

  /* positioning */
  position: relative;

  /* text location */
  display: flex;
  justify-content: center;
  align-items: center;

 
  box-sizing: border-box;

  /* font */
  color: black;
  font-family: sans-serif;
  font-size: 18px;
  user-select: none;
  touch-action: none;
}

.resize-container_E {

  width: 950px;
  height: 600px;
  border-style: solid;
  text-align: center;
  position: relative;
  align-items: center;
  margin: 0 auto;
}


#button_E {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin-left: 238px;
}


#submit_button {
  border-radius: 10%;
  background-color: #BD1414; /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin: 20px 510px 100px;
}

.heading {
  color: black;
  font-family: sans-serif;
  font-size: 22px;
}

#Porn_E{
  background-color: rgba(35, 179, 241,.55);
  left: 122px;
  top:-10px;
  position: absolute;
  mix-blend-mode: multiply;
 
  }
   

#Porn_E span#Porn_Ea {
  display: inline-block;
}

#Porn_E:hover span#Porn_Ea {
  display: none;
}

#Porn_E span#Porn_Eb {
  display: none;
}

#Porn_E:hover span#Porn_Eb {
  display: inline-block;
}



#Fantasy_E {
  background-color:rgba(241, 234, 34,.55);
  top: 200px;
  left: -30px;
  position: absolute;
  mix-blend-mode: multiply;
}

#Fantasy_E span#Fantasy_Ea {
  display: inline;
}

#Fantasy_E:hover span#Fantasy_Ea {
  display: none;
}

#Fantasy_E span#Fantasy_Eb {
  display: none;
}

#Fantasy_E:hover span#Fantasy_Eb {
  display:...

JavaScript

// Sexual Ecologies Diagram Code
//By: Jude Pinto
//535 lines of code.

// This code was implemented into a survey on Qualtrics for Aki Gormezano's study on Sexual Ecologies.

//This program has imported the library interact.js, created by Taye. 
//https://interactjs.io/


//Instructions: Drag and resize any circle using a mouse or touch screen. 

//To reset circle positions, press "Reset". To obtain the areas of the circles, areas of intersection, radii, and coordinates, click "Submit".

//---------------------------------------------------------------------------------


//Global Variables
//Usually, global variables are not ideal, however, I implemented them to make the program more legible to those conducting the study.

//Variables contain the initial radius and coordinate values of each circle when the program starts.



//PornE Global Start Values
var Porn_E_radius = document.getElementById("Porn_E").clientWidth/2;
var Porn_E_start = findCentroid(getPos1(Porn_E), getPos2(Porn_E));
var Porn_E_startx=  Porn_E_start.x2;
var Porn_E_starty= Porn_E_start.y2;


//FantasyE Global Start Values
var Fantasy_E_radius = document.getElementById("Fantasy_E").clientWidth/2;
var Fantasy_E_start = findCentroid(getPos1(Fantasy_E), getPos2(Fantasy_E));
var Fantasy_E_startx= Fantasy_E_start.x2;
var Fantasy_E_starty= Fantasy_E_start.y2;

//InPersonE Global Start Values
var In_Person_E_radius = document.getElementById("In_Person_E").clientWidth/2;
var In_Person_E_start =  findCentroid(getPos1(In_Person_E), getPos2(In_Person_E));
var In_Person_E_startx= In_Person_E_start.x2;
var In_Person_E_starty= In_Person_E_start.y2;



//Global Coordinate Dictionaries
//Contain the x and y coordinates of each circle

var CoordinatesX_E = {
  Porn_E: Porn_E_startx,
  Fantasy_E: Fantasy_E_startx,
  In_Person_E: In_Person_E_startx
};


var CoordinatesY_E = {
  Porn_E: Porn_E_starty,
  Fantasy_E: Fantasy_E_starty,
  In_Person_E: In_Person_E_starty
};

//Global Intersection Dictionaries:
//Contain...