diff --git a/index.php b/index.php
index 1cd82fa..15a16f4 100644
--- a/index.php
+++ b/index.php
@@ -9,6 +9,7 @@
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/draggable.js"></script>
 <script src="js/main.js"></script>
 <!-- <link href="styles/app.css" rel="stylesheet" type="text/css">
  -->
diff --git a/js/draggable.js b/js/draggable.js
new file mode 100644
index 0000000..72ee9a0
--- /dev/null
+++ b/js/draggable.js
@@ -0,0 +1,53 @@
+// draggable
+
+$(document).ready(function() {
+    var a = 3;
+    $('.draggable').draggable({
+   start: function(event, ui) { $(this).css("z-index", a++); }
+});
+//     $('#resize').resizable({handles: 'se'}).draggable({
+//    start: function(event, ui) { $(this).css("z-index", a++); }
+// });;
+
+  // font size relative to div draggable/resizable size
+  var $wrapper = $(".scaleable-wrapper");
+  $wrapper.each(function (d) {
+    var $this = $(this);
+    // var elHeight = $this.outerHeight();
+    var elWidth = $this.outerWidth();
+
+    $this.resizable({
+      resize: doResize
+    });
+
+    function doResize(event, ui) {
+      
+      var scale, origin;
+        
+      scale = Math.min(
+        // ui.size.height / elHeight,
+        ui.size.width / elWidth
+      );
+      // scale=1.0;
+      // scale=2*scale
+
+      $this.css({
+        // transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
+        transform: "translate(0%, 0%) " + "scale(" + scale + ")"
+
+      });
+      
+    }
+
+    var starterData = { 
+        size: {
+          // height: $this.height(),
+          width: $this.width()
+        }
+    }
+    // console.log("starterData", starterData, this);
+    doResize(null, starterData);
+ 
+
+  });
+});
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 50af07a..5961106 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,64 +1,4 @@
 // designed by Angeliki Diakrousi
-// draggable
-
-$(document).ready(function() {
-    var a = 3;
-    $('.draggable').draggable({
-   start: function(event, ui) { $(this).css("z-index", a++); }
-});
-//     $('#resize').resizable({handles: 'se'}).draggable({
-//    start: function(event, ui) { $(this).css("z-index", a++); }
-// });;
-
-  // font size relative to div draggable/resizable size
-  var $wrapper = $(".scaleable-wrapper");
-  $wrapper.each(function (d) {
-    var $this = $(this);
-    // var elHeight = $this.outerHeight();
-    var elWidth = $this.outerWidth();
-
-    $this.resizable({
-      resize: doResize
-    });
-
-    function doResize(event, ui) {
-      
-      var scale, origin;
-        
-      scale = Math.min(
-        // ui.size.height / elHeight,
-        ui.size.width / elWidth
-      );
-      // scale=1.0;
-      // scale=2*scale
-
-      $this.css({
-        // transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
-        transform: "translate(0%, 0%) " + "scale(" + scale + ")"
-
-      });
-      
-    }
-
-    var starterData = { 
-        size: {
-          // height: $this.height(),
-          width: $this.width()
-        }
-    }
-    // console.log("starterData", starterData, this);
-    doResize(null, starterData);
- 
-
-  });
-
-
-
-
-
-
-
-
 // scripts for tab button 
 
   function openCity(evt, cityName) {
@@ -80,7 +20,7 @@ $(document).ready(function() {
 var a1 = document.getElementById("a1"),
   a2 = document.getElementById("a2"),
   but = document.getElementById("but");
-but.addEventListener("click", function () {
+  but.addEventListener("click", function () {
   if (a1.paused) {
     a1.play();
     a2.play();
@@ -263,9 +203,8 @@ window.onclick2 = function(event) {
       }
     }
   }
-}
+};
 
 // for thesis
 // var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)
 
-});
\ No newline at end of file
diff --git a/player.html b/player.html
index 09e00fb..9a42d65 100644
--- a/player.html
+++ b/player.html
@@ -73,7 +73,7 @@ $("#katalin").click(function(){
 
 
 
-<!-- recordings -->
+<!-- draggable audio tags/recordings -->
 
 
 <section>
diff --git a/podcast1.php b/podcast1.php
index 1e3bb52..3b47588 100644
--- a/podcast1.php
+++ b/podcast1.php
@@ -2,113 +2,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
-<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
-<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+ <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
 <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
-<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
-<script src="js/main.js"></script>
   </head>
 <body>
-<script type="text/javascript" src="js/jquery.min.js"></script>
-<script type="text/javascript" src="js/mp3recorder.js"></script>
-<!-- scripts for recorder -->
- <script type="text/javascript">
-    var audio_context;
-    
-    function __log(e, data) {
-      log.innerHTML += "\n" + e + " " + (data || '');
-    }
-    
-    $(function() {
-      
-      try {
-        // webkit shim
-        window.AudioContext = window.AudioContext || window.webkitAudioContext;
-        navigator.getUserMedia = ( navigator.getUserMedia ||
-                         navigator.webkitGetUserMedia ||
-                         navigator.mozGetUserMedia ||
-                         navigator.msGetUserMedia);
-        window.URL = window.URL || window.webkitURL;
-      
-        var audio_context = new AudioContext;
-        __log('Audio context set up.');
-        __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
-      } catch (e) {
-        alert('No web audio support in this browser!');
-      }
-            
-      $('.recorder .start').on('click', function() {
-        $this = $(this);
-        $recorder = $this.parent();
-        
-        navigator.getUserMedia({audio: true}, function(stream) {
-          var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
-          $recorder.data('recorderObject', recorderObject);
-          
-          recorderObject.start();
-        }, function(e) { });
-      });
-      
-      $('.recorder .stop').on('click', function() {
-        $this = $(this);
-        $recorder = $this.parent();
-        
-        recorderObject = $recorder.data('recorderObject');
-        recorderObject.stop();
-        
-        recorderObject.exportMP3(function(base64_data) {
-          var url = 'data:audio/mp3;base64,' + base64_data;
-          var au  = document.createElement('audio');
-
-      document.getElementById("playerContainer").innerHTML = "";
-      // console.log(url)
-
-      var duc = document.getElementById("dataUrlcontainer");
-      duc.innerHTML = url;
-
-      au.controls = true;
-      au.src = url;
-      //$recorder.append(au);
-      $('#playerContainer').append(au);
-          
-          recorderObject.logStatus('');
-        });
-
-      });
-      
-    });
-    </script>
 
 
- <script>
-    function upload(){
-
-    var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
-
-      $.ajax({
-      type: "POST",
-      url: "scripts/uploadMp3.php",
-      data: { 
-          base64: dataURL
-       }
-    }).done(function(o) {
-      console.log('saved'); 
-
-      });
-
-    }    
-  </script>
-
 <!-- draggable -->
-<script>
-  $(document).ready(function() {
-    var a = 3;
-    $('.draggable').draggable({
-   start: function(event, ui) { $(this).css("z-index", a++); }
-});
-    });
-</script>
 <br><br>
 <h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
   "Mediating Speech"
@@ -233,7 +133,103 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
 <!-- <script src="scripts/app.js"></script> -->
 
 
-<!-- script for subs and sound -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+ 
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/mp3recorder.js"></script>
+
+<script src="js/draggable.js"></script>
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/main.js"></script>
+<!-- scripts for recorder -->
+ <script type="text/javascript">
+    var audio_context;
+    
+    function __log(e, data) {
+      log.innerHTML += "\n" + e + " " + (data || '');
+    }
+    
+    $(function() {
+      
+      try {
+        // webkit shim
+        window.AudioContext = window.AudioContext || window.webkitAudioContext;
+        navigator.getUserMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+        window.URL = window.URL || window.webkitURL;
+      
+        var audio_context = new AudioContext;
+        __log('Audio context set up.');
+        __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
+      } catch (e) {
+        alert('No web audio support in this browser!');
+      }
+            
+      $('.recorder .start').on('click', function() {
+        $this = $(this);
+        $recorder = $this.parent();
+        
+        navigator.getUserMedia({audio: true}, function(stream) {
+          var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
+          $recorder.data('recorderObject', recorderObject);
+          
+          recorderObject.start();
+        }, function(e) { });
+      });
+      
+      $('.recorder .stop').on('click', function() {
+        $this = $(this);
+        $recorder = $this.parent();
+        
+        recorderObject = $recorder.data('recorderObject');
+        recorderObject.stop();
+        
+        recorderObject.exportMP3(function(base64_data) {
+          var url = 'data:audio/mp3;base64,' + base64_data;
+          var au  = document.createElement('audio');
+
+      document.getElementById("playerContainer").innerHTML = "";
+      // console.log(url)
+
+      var duc = document.getElementById("dataUrlcontainer");
+      duc.innerHTML = url;
+
+      au.controls = true;
+      au.src = url;
+      //$recorder.append(au);
+      $('#playerContainer').append(au);
+          
+          recorderObject.logStatus('');
+        });
+
+      });
+      
+    });
+    </script>
+
+
+ <script>
+    function upload(){
+
+    var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
+
+      $.ajax({
+      type: "POST",
+      url: "scripts/uploadMp3.php",
+      data: { 
+          base64: dataURL
+       }
+    }).done(function(o) {
+      console.log('saved'); 
+
+      });
+
+    }    
+  </script>
+  <!-- script for subs and sound -->
 <script>
   var dialogueTimings = [10,24,28,58,115,120,124,134,138,142,152,160],
         dialogues = document.querySelectorAll('#transcript>div'),
@@ -260,8 +256,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
 
 
 
-
-
 </body>
 
 </html>