timestamps fixed with endings and the opning is also ok

index.html

@@ -23,8 +23,16 @@
     <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>
+     <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>
@@ -35,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>
@@ -152,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 = {
@@ -185,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>
@@ -276,6 +287,13 @@ includeHTML();
        $("#closeall").hide()
      }
 
+     function startaudio(){
+      var box = document.getElementById("audioBG");
+      box.currentTime=500;
+     }
+
+     window.onload = startaudio();
+
 
 $("#about").click(function(){
     $("#showabout").fadeIn()

static/css/style.css

@@ -447,9 +447,9 @@ h2 {
 
 
 /* about and colophon */
-/*#menu {
+#menu {
   margin-top: 15px;
-}*/
+}
 
 #about, #colophon, #how {
 font-family:'Walter Turncoat', cursive;
@@ -457,7 +457,7 @@ color: #d81159;
 font-size: 16px;
 }
 
-#colophon {
+/*#colophon {
   position: absolute;
   left: 50px;
   bottom:30px;
@@ -475,7 +475,7 @@ font-size: 16px;
     position: absolute;
   right: 50px;
   top:30px;
-}
+}*/
 
 
 #about a {