diff --git a/index-fixed.html b/index-fixed.html
deleted file mode 100644
index b15d4df..0000000
--- a/index-fixed.html
+++ /dev/null
@@ -1,152 +0,0 @@
-<html>
-<head>
-  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-<meta content="utf-8" http-equiv="encoding">
-<meta http-equiv="Access-Control-Allow-Origin" content="*">
-<title>VVVW</title>
-<link rel="stylesheet" href="static/css/style.css">
-<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-<script src="static/js/jquery.min.js"></script>
-<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
-<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-<script src="static/js/jquery-1.12.4.js"></script>
-<script src="static/js/jquery-ui.js"></script>
-<script src="static/js/d3.v3.min.js"></script>
-</head>
-<body>
-<div class="container-fluid p-0">
-<div class="bg">
-<div class="row">
-  <div class="col-md-7">
-    <div class="map_area">
-      <script src="static/js/d3_map.js"></script>
-    </div>
-    <div class="row">
-      <div class="col-md-12">
-        <p id="legend_title">Map legend</p>
-
-        <div class="map_legend">
-        <div class="box1"></div> <p>Folklore literature</p>
-        <div class="box2"></div> <p>Islamic Mysticism</p>
-        <div class="box3"></div> <p>Contemporary poets</p>
-        <div class="box4"></div> <p>Contemporary musicians</p>
-      </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-5">
-    <div class="scrollable">
-    <div class="row">
-      <div class="col-md-12">
-          <div w3-include-html="thesis.html" class="thesis">
-          </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-10">
-        <div class="media_area">
-          <!-- <p>Related media</p> -->
-          <div id="showdadaloglu"><div class='text_audio'>Bio</div>
-            <!-- <audio id="audiodadaloglu" controls>
-              <source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
-              Your browser does not support the audio tag.
-            </audio> -->
-            <img src="static/images/poem.png">
-          </div>
-
-          <div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
-
-          <div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-          <iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        </div>
-
-          <div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
-
-          <div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
-
-          <div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
-
-          <div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
-
-          <div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
-
-          <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
-        </div>
-      </div>
-    </div>
-</div>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="play-stop">
-      <div id="tracktime">0:0 / 22:39</div>
-      <a id="mBtn" onclick="PSFunction()">(Play)</a>
-      <button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
-      <button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
- </div>
- <div class="main_audio">
-   <audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
-   <source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
-       Your browser does not support the audio tag.
-     </audio>
-</div>
- </div>
-</div>
-
-</div>
-<!-- scripts for mouse events -->
-<script>
-  var audio = document.getElementById("audioBG");
-  var btn = document.getElementById("mBtn");
-
-  function PSFunction() {
-    if (audio.paused) {
-      audio.play();
-      btn.innerHTML = "(Pause)";
-    } else {
-      audio.pause();
-      btn.innerHTML = "(Play)";
-    }
-  }
-</script>
-
- <script>
-function includeHTML() {
-  var z, i, elmnt, file, xhttp;
-  /* Loop through a collection of all HTML elements: */
-  z = document.getElementsByTagName("*");
-  for (i = 0; i < z.length; i++) {
-    elmnt = z[i];
-    /*search for elements with a certain atrribute:*/
-    file = elmnt.getAttribute("w3-include-html");
-    if (file) {
-      /* Make an HTTP request using the attribute value as the file name: */
-      xhttp = new XMLHttpRequest();
-      xhttp.onreadystatechange = function() {
-        if (this.readyState == 4) {
-          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
-          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
-          /* Remove the attribute, and call this function once more: */
-          elmnt.removeAttribute("w3-include-html");
-          includeHTML();
-        }
-      }
-      xhttp.open("GET", file, true);
-      xhttp.send();
-      /* Exit the function: */
-      return;
-    }
-  }
-}
-
-includeHTML();
-</script>
-</div>
-</body>
-</html>
diff --git a/index.html b/index.html
index 14ab9d5..5bc02ef 100644
--- a/index.html
+++ b/index.html
@@ -22,15 +22,17 @@
   <div class="row">
     <div class="col-md-4"><div id="title_website"><a href="/">Wells of Knowledge</a></div></div>
       <div class="col-md-3 offset-md-5" id="menu">
-        <span id="about">
-         <a href="#" >about</a> |
-       </span>
-        <span id="colophon">
-         <a href="#" >colophon</a> |
-       </span>
-       <span id="how">
-        <a href="#" >how to use</a>
-      </span>
+    <span id="about">
+     <a href="#" >about</a> |
+   </span>
+   <span id="colophon">
+     <a href="#" >colophon</a> |
+   </span>
+
+      <span id="how">
+    <a href="#" >how to use</a> |
+  </span>
+
   </div>
 
   </div>
@@ -41,10 +43,10 @@
       <div class="col-md-12">
         <br>
         <div class="map_legend">
-        <div id="box1" onclick="popup_bg(600)"><i class="box fa fa-play"></i></div> <p>Folklore literature</p>
-        <div id="box2" onclick="popup_bg(1465)"><i class="box fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
-        <div id="box3" onclick="popup_bg(0)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
-        <div id="box4" onclick="popup_bg(3960)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
+        <div id="box1" onclick="popup_bg(600,1460)"><i class="box fa fa-play"></i></div> <p>Folklore literature</p>
+        <div id="box2" onclick="popup_bg(1465,1770)"><i class="box fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
+        <div id="box3" onclick="popup_bg(0,600)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
+        <div id="box4" onclick="popup_bg(3960,3960)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
       </div>
       </div>
       </div>
@@ -158,18 +160,12 @@ Through the map, we give shape to a common context in Turkish culture. The map a
   </div>
 </div>
 
-           <span id="colophon">
-     <a href="#" >colophon</a>
-   </span>
-
-      <span id="how">
-    <a href="#" >how to use</a>
-  </span>
 
 </div>
 </div>
 
 <script type="text/javascript">
+
 $(document).ready(function() {
     var a = 3;
     var dragOpts = {
@@ -191,15 +187,24 @@ $(document).ready(function() {
 <!-- scripts for mouse events -->
 
 <script>
-function popup_bg(time) {
+function popup_bg(start,end) {
   var myIcon = document.querySelector(".audioBG");
   var box = document.getElementById("audioBG");
     if (box.paused) {
+      box.currentTime = start;
       myIcon.className = "audioBG fa fa-pause";
       box.play();
+      console.log(box.currentTime);
+// the below setInterval is to check the currentTime is greater than 56 or not in every 1 second
+  setInterval(function(){
+    if(box.currentTime>end){
+      myIcon.className = "audioBG fa fa-play";
+      box.pause();
+        }
+      },1000);
 };
-    box.currentTime = time;
-    console.log(time);
+    // box.currentTime = start;
+    // console.log(start);
 };
 </script>
 <script>
@@ -279,8 +284,16 @@ includeHTML();
        $("#showbio").hide()
        $("#nothesis").hide()
        $("#showvideo").hide()
+       $("#closeall").hide()
      }
 
+     function startaudio(){
+      var box = document.getElementById("audioBG");
+      box.currentTime=3384;
+     }
+
+     window.onload = startaudio();
+
 
 $("#about").click(function(){
     $("#showabout").fadeIn()
diff --git a/static/css/style.css b/static/css/style.css
index 30ec006..bf86595 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -235,6 +235,10 @@ a :hover {
 }
 
 
+#closeall {
+display: none;
+}
+
 /* text area */
 /* with position:fixed and svg {position:relative} the text can overlay the map */
 .thesis {
@@ -471,8 +475,13 @@ font-size: 16px;
     position: absolute;
   right: 50px;
   top:30px;
+<<<<<<< HEAD
 }
 */
+=======
+}*/
+
+>>>>>>> a4c562a74b0d98a69fcba45d31accdddf753cd2e
 
 #about a {
 text-decoration: none;
diff --git a/static/js/d3_map.js b/static/js/d3_map.js
index 4dd41c7..b7f3b91 100644
--- a/static/js/d3_map.js
+++ b/static/js/d3_map.js
@@ -142,6 +142,7 @@ d3.json("/static/js/group1.json", function(error, json) {
     console.log("around")
     $("#nothesis").fadeIn()
     $("#thesis").fadeIn()
+    $("#closeall").fadeIn()
     $("#bio" + name).fadeIn()
    var dada = document.getElementById("text" + name);
    dada.className += " active";
