Sexual Ecologies Diagram Final

by jude_pinto

HTML

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

<button id = "disable">Disable Scrolling
</button>
       
        <button id= "button_E">Reset
</button>
<div id="container_1" class="resize-container_E">
  <span class="heading"> Gender/Sex Eroticism </span>
  <div id="Porn_E" class="resize-drag" >
  <svg class = "move" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="100" y="200"
	 width="511.626px" height="511.626px" viewBox="0 0 511.626 511.626" style="enable-background:new 0 0 511.626 511.626;"
	 xml:space="preserve">
<g>
	<path...

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 70px 90px 250px;
  align-items: center;

  /* positioning */
  position: relative;
  
  /* text location */
  display: flex;
  justify-content: center;
  box-sizing: border-box;

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

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

.z-ind{
  z-index: 99 !important;
}


#button_E {
  background-color: #E22B2B;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;

  font-size: 16px;
  position: static;
  margin-left: 368px;
  
}

#disable {
  background-color: #E22B2B;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  margin-left: 188px;
  font-size: 16px;
  position: static;

  
}


#enable {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
   margin-left: 188px;
  text-align: center;
  text-decoration: none;
  position: inherit;
  font-size: 16px;


  
}


#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: 119px;
  top: -60px;
  position: absolute;
  mix-blend-mode: multiply;

  }
   

#Porn_E span#Porn_Ea {
  display: inline;

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

}
*/
#Porn_E span#Porn_Eb...

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.

var Porn_E_percent = 50 + '%';
/*$('container_1').addClass("lock-screen");*/

document.getElementById("disable").onclick = function() {

    if(document.getElementById('disable').innerHTML == 'Disable Scrolling'){
    document.getElementById('disable').style.backgroundColor = "#4CAF50";
      document.body.classList.add("stop-scrolling");
      document.getElementById('disable').innerHTML = 'Enable Scrolling'
    }
    else{
        document.body.classList.remove("stop-scrolling");
    document.getElementById('disable').innerHTML = 'Disable Scrolling';
     document.getElementById('disable').style.backgroundColor = "#E22B2B";
    }
    
} 




$('#Porn_E #Porn_Eb').hide();

$(Porn_E).click(function() {
  $(this).find('#Porn_Ea').toggle();
  $(this).find('#Porn_Eb').toggle();
})

$('#Fantasy_E #Fantasy_Eb').hide();

$(Fantasy_E).click(function() {
  $(this).find('#Fantasy_Ea').toggle();
  $(this).find('#Fantasy_Eb').toggle();
})

$('#In_Person_E #In_Person_Eb').hide();

$(In_Person_E).click(function() {
  $(this).find('#In_Person_Ea').toggle();
  $(this).find('#In_Person_Eb').toggle();
})
/*
function myFunction() {
  var x =...