ciao

tree/park.css

@@ -79,7 +79,6 @@ div.text_container {
     left:3%;
     right:3%;
     position:fixed;
-    /*border: 1px solid;*/
     margin-block-start: 1em;
     margin-block-end: 1em;
     margin-inline-start: 1em;
@@ -335,7 +334,7 @@ span.button_text{
     z-index:17;
 }
 #grass2{
-    bottom: 65%;
+    bottom: 60%;
     left: 45%;
     position: absolute;
     z-index:17;
@@ -480,6 +479,127 @@ span.button_text{
     display: block;
 }
 
+/* looking for ned scene*/
+    #woman{
+        bottom: 60%;
+        left: 22%;
+        position: absolute;
+        cursor: pointer;
+    }
+    #newspaper_seller{
+        bottom: 55%;
+        left: 48%;
+        position: absolute;
+        cursor: pointer;
+    }
+    #sport1{
+        bottom: 30%;
+        left: 67%;
+        position: absolute;
+        cursor: pointer;
+        z-index:-5;
+    }
+    #sport2{
+        bottom: 65%;
+        left: 63%;
+        position: absolute;
+        cursor: pointer;
+    }
+
+    #ned{
+        bottom: 47%;
+        left: 86%;
+        position: absolute;
+        cursor: pointer;
+    }
+
+    .woman_bubble {
+        bottom:75%;
+        left: 24%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 1.2vw;
+        line-height: 1.5vw;
+        text-align: center;
+        width: 14vw;
+        height: 4.2vw;
+        border-radius: 10px;
+        padding: 1vw;
+        border: #000000 solid 1px;
+    }
+
+    .woman_bubble:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        z-index: 1;
+        border-style: solid;
+        border-width: 24px 20px 0 0;
+        border-color: #ffffff transparent transparent transparent;
+        bottom: -24px;
+        left: 15%;
+        margin-left: -10px;
+    }
+    .woman_bubble:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        z-index: 0;
+        border-style: solid;
+        border-width: 25px 21px 0 0;
+        border-color: #000000 transparent transparent transparent;
+        bottom: -26px;
+        left: 15%;
+        margin-left: -11px;
+        display: block;
+    }
+
+    .vendor_bubble {
+        bottom:75%;
+        left: 42%;
+        position: absolute;
+        background: #ffffff;
+        color: #000000;
+        font-family: sinistre;
+        font-size: 1.2vw;
+        line-height: 1.5vw;
+        text-align: center;
+        width: 14vw;
+        height: 4.2vw;
+        border-radius: 10px;
+        padding: 13px;
+        border: #000000 solid 1px;
+    }
+    .vendor_bubble:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 0;
+        z-index: 1;
+        border-style: solid;
+        border-width: 0 20px 24px 0;
+        border-color: transparent #ffffff transparent transparent;
+        bottom: -24px;
+        left: 76%;
+        margin-left: -10px;
+    }
+    .vendor_bubble:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        z-index: 0;
+        border-style: solid;
+        border-width: 0 21px 25px 0;
+        border-color: transparent #000000 transparent transparent;
+        bottom: -26px;
+        left: 76%;
+        margin-left: -10px;
+        display: block;
+    }
+
 
 
 /* hide scroll bar */

tree/park_N.html

@@ -26,12 +26,27 @@
         <img  id="flower5" src="imgs/park/flower1.gif" height="5%">
         <img  id="grass1" src="imgs/park/grass1.gif" height="75vw">
         <img  id="grass2" src="imgs/park/grass1.gif" height="75vw">
+        <img  id="statue" src="imgs/park/statue.gif" height="22%">
+        <img  id="tree4" src="imgs/park/tree4.gif" height="25%">
+        <img  id="flower6" src="imgs/park/flower1.1.gif" height="5%"> 
+        <img  id="flower7" src="imgs/park/flower3.1.gif" height="6%">
+        <img  id="flower8" src="imgs/park/flower3.1.gif" height="6%">
+        <img  id="tree5" src="imgs/park/tree1.gif" height="30%">
+       <!-- <img  id="dog_guy" src="imgs/park/guy_dog.gif" height="13%">-->
+        <img  id="sport1" src="imgs/park/fitness1.gif" height="10%">
+        <img  id="sport2" src="imgs/park/fitness2.gif" height="10%">
+        <img  id="newspaper_seller" src="imgs/park/newspaper_seller.gif" height="15%">
+        <img  id="woman" src="imgs/park/woman.gif" height="19%">
+        <img  id="ned" src="imgs/park/ned.gif" height="15%">
+
+        <div class="woman_bubble" style="display: none;">I don't know, you should try to ask the news vendor.</div>
+        <div class="vendor_bubble" style="display: none;">I sold a copy to a guy not so long ago. He must be still around.</div>
 
       </div>
 
     <div class="text_container"> 
       <div class="message1 instructions">
-      Move around the park with the arrows ←↑↓→ and click on the people to talk with them.  
+      Move around the park with the arrows ←↑↓→ and click on the people to ask them if they saw who left the newspaper on the bench.  
     </div>
   </div>
 
@@ -98,13 +113,20 @@ $(document).keydown(function(e) {
     player_img.appendChild(img);
     
     //get player name from local storage
-    document.querySelector('#player_name').innerHTML =localStorage.playerName;
 
 
+    $("#woman").click (function(){
+      $(".woman_bubble").toggle();
+    });
+
+    $("#newspaper_seller").click (function(){
+      $(".vendor_bubble").toggle();
+    });
 
 
  </script>
 
 <script type="text/javascript" src="index.js" ></script>
 
+    
 </body>