diff --git a/src/activities/family/family.js b/src/activities/family/family.js
index 9471fc8c8..1a155f982 100644
--- a/src/activities/family/family.js
+++ b/src/activities/family/family.js
@@ -1,198 +1,219 @@
 /* GCompris - family.js
  *
  * Copyright (C) 2016 RAJDEEP KAUR <rajdeep.kaur@kde.org>
  *
  * Authors:
  *   "RAJDEEP KAUR" <rajdeep.kaur@kde.org> (Qt Quick port)
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
  *   the Free Software Foundation; either version 3 of the License, or
  *   (at your option) any later version.
  *
  *   This program is distributed in the hope that it will be useful,
  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *   GNU General Public License for more details.
  *
  *   You should have received a copy of the GNU General Public License
  *   along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 .pragma library
 .import QtQuick 2.0 as Quick
 
 var currentLevel = 0
 var items
 var url = "qrc:/gcompris/src/activities/family/resource/"
 var treestructure = [
                     {  edgelist:[
                                    [0.41,0.25,0.64,0.25],
                                    [0.53,0.25,0.53,0.50]
                                 ],
                        nodePositions:[
                                [0.211,0.20],
                                [0.633,0.20],
                                [0.4,0.50]
                        ],
                        rationn:[80,80,80]
                     },
+
                     {  edgelist:[
                                   [0.41,0.25,0.64,0.25],
                                   [0.53,0.25,0.53,0.50]
                                 ],
                       nodePositions:[
                                   [0.211,0.20],
                                   [0.633,0.20],
                                   [0.4,0.50]
                       ],
-                                rationn:[80,80,80]
+                      rationn:[80,80,80]
                     },
-                    {  edgelist:[],
+
+                    {  edgelist:[ [0.41,0.25,0.64,0.25],
+                                  [0.53,0.25,0.44,0.50],
+                                  [0.53,0.25,0.63,0.50]
+                                ],
+                       nodePositions:[
+                                [0.211,0.20],
+                                [0.633,0.20],
+                                [0.33,0.50],
+                                [0.55,0.50]
+                       ],
+                       rationn:[80,80,80]
+
+                    },
+
+                    {  edgelist:[[0.41,0.25,0.64,0.25],
+                                 [0.53,0.20,0.44,0.33],
+                                 [0.53,0.25,0.59,0.33]],
                        nodePositions:[
                                     [0.180,0.09],
                                     [0.55,0.09],
                                     [0.08,0.35],
                                     [0.30,0.35],
                                     [0.50,0.35],
                                     [0.70,0.35],
                                     [0.01,0.65],
                                     [.21,0.65],
                                     [.41,0.65],
                                     [.61,0.65],
                                     [.81,0.65]
                        ]
                     },/*
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodePositions:[]
                     },
                     {  edgelist:[],
                        nodepositions:[]
                     }*/
 ]
 
 var dataset = [
               {  nodeleave:["man3.svg","lady2.svg","boy1.svg"],
                  currentstate:["active","deactive","active"],
                  answer:["Father"],
                  optionss:["Father","Grandfather","Uncle"]
 
               },
               {  nodeleave:["man3.svg","lady2.svg","boy1.svg"],
-                 currentstate:["deactive","active","active"],
+                 currentstate:["deactive","active","active",],
                  answer:["Mother"],
                  optionss:["Mother","GrandMother","Aunty"]
 
               },
-              {  nodeleave:["man3.svg","lady2.svg","boy1.svg","boy2.svg","girl3.svg"],
-                 answer:["Father"],
-                 optionss:["Father","Brother","Grandfather","uncle"]
+              {  nodeleave:["man3.svg","lady2.svg","boy1.svg","boy2.svg"],
+                 currentstate:["deactive","deactive","active","active"],
+                 answer:["Brother"],
+                 optionss:["Cousin","Brother","Sister"]
               },
               {  nodeleave:["grandpa.svg","old-lady.svg","man1.svg","lady2.svg","man2.svg","lady1.svg",
                    "boy1.svg","boy2.svg","girl2.svg","girl3.svg","girl4.svg"],
                  answer:["Father"],
                  optionss:["M"]
               }
 
 ]
 
-var numberOfLevel = 2; 
+var numberOfLevel = 3;
 
 var mode = "image";
 
 function start(items_) {
     items = items_
     currentLevel = 0
     initLevel()
 }
 
 function stop() {
 }
 
 function initLevel() {
     items.bar.level = currentLevel + 1
     var test = treestructure[currentLevel]
     var test1 = dataset[currentLevel]
     items.nodecreator.model.clear();
-    for(var i =0;i<3;i++){
+    items.answerschoice.model.clear();
+    items.edgecreator.model.clear();
+    for(var i = 0 ; i < test.nodePositions.length; i++){
         items.nodecreator.model.append({
                        "xx": test.nodePositions[i][0],
                        "yy": test.nodePositions[i][1],
                        "nodee": test1.nodeleave[i],
                        "rationn": test.rationn[i],
                        "currentstate":test1.currentstate[i]
                      });
     }
 
     for(var j = 0;j <3; j++){
        items.answerschoice.model.append({
                "optionn": test1.optionss[j],
                "answer":test1.answer[0]
        });
     }
 
-    for(var k =0 ;k < 2; k++){
+    for(var k =0 ; k < test.edgelist.length ; k++){
         items.edgecreator.model.append({
              "x1": test.edgelist[k][0],
              "y1": test.edgelist[k][1],
              "x22": test.edgelist[k][2],
              "y22": test.edgelist[k][3]
 
         });
 
     }
 
 
 }
 
 function nextLevel() {
     if(numberOfLevel <= ++currentLevel ) {
         currentLevel = 0
     }
     initLevel();
 }
 
 function previousLevel() {
     if(--currentLevel < 0) {
         currentLevel = numberOfLevel - 1
     }
     initLevel();
 }
diff --git a/src/activities/family/resource/answerarea.svg b/src/activities/family/resource/answerarea.svg
index fb67e8805..b043e66ee 100644
--- a/src/activities/family/resource/answerarea.svg
+++ b/src/activities/family/resource/answerarea.svg
@@ -1,65 +1,117 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="210mm"
-   height="374mm"
-   viewBox="0 0 744.09449 1325.1963"
-   id="svg3452"
+   height="297mm"
+   viewBox="0 0 744.09448819 1052.3622047"
+   id="svg3359"
    version="1.1"
    inkscape:version="0.91 r13725"
    sodipodi:docname="answerarea.svg">
   <defs
-     id="defs3454" />
+     id="defs3361">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4193">
+      <stop
+         style="stop-color:#dcdcdc;stop-opacity:1"
+         offset="0"
+         id="stop4195" />
+      <stop
+         style="stop-color:#f2f2f2;stop-opacity:1"
+         offset="1"
+         id="stop4197" />
+    </linearGradient>
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="69.604843"
+       x2="565.34314"
+       y1="178.17627"
+       x1="565.34314"
+       id="linearGradient4229"
+       xlink:href="#linearGradient4223"
+       inkscape:collect="always"
+       gradientTransform="matrix(0,-3.6677336,5.3529674,0,-293.82419,2630.4287)" />
+    <linearGradient
+       id="linearGradient4223"
+       inkscape:collect="always">
+      <stop
+         id="stop4225"
+         offset="0"
+         style="stop-color:#87a6dd;stop-opacity:1" />
+      <stop
+         id="stop4227"
+         offset="1"
+         style="stop-color:#9fb8e3;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="57.461983"
+       x2="581.93799"
+       y1="188.17625"
+       x1="581.93799"
+       id="linearGradient4191-2"
+       xlink:href="#linearGradient4193"
+       inkscape:collect="always"
+       gradientTransform="matrix(0,-3.6677336,5.3529674,0,-289.4469,2632.1139)" />
+  </defs>
   <sodipodi:namedview
      id="base"
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.35"
      inkscape:cx="375"
      inkscape:cy="520"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:window-width="1303"
      inkscape:window-height="744"
      inkscape:window-x="63"
      inkscape:window-y="24"
      inkscape:window-maximized="1" />
   <metadata
-     id="metadata3457">
+     id="metadata3364">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
         <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,272.83478)">
-    <rect
-       id="rect3949"
-       style="fill:#0055d4"
-       height="761.42426"
-       width="1325.7157"
-       y="-747.85498"
-       x="-269.06711"
-       transform="matrix(0,1,-1,0,0,0)" />
+     id="layer1">
+    <path
+       inkscape:connector-curvature="0"
+       id="rect4153-5"
+       d="m 3.7157114,1016.9134 c 0,19.287 27.1139716,34.8372 60.8333786,34.8372 l 613.75897,0 c 33.72036,0 60.83338,-15.5502 60.83338,-34.8372 l 0,-974.823396 c 0,-19.28683 -27.11406,-34.8304911 -60.83338,-34.8304911 l -613.75897,0 c -33.719357,0 -60.8333786,15.5436611 -60.8333786,34.8304911 l 0,974.823396 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#63350f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="rect4153-3"
+       d="m 9.9454366,1008.4042 c 0,19.1195 26.5427404,34.5346 59.5517794,34.5346 l 600.828744,0 c 33.00994,0 59.55178,-15.4151 59.55178,-34.5346 l 0,-966.357869 c 0,-19.119344 -26.54293,-34.5279495 -59.55178,-34.5279495 l -600.828744,0 c -33.008989,0 -59.5517794,15.4086055 -59.5517794,34.5279495 l 0,966.357869 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4191-2);fill-opacity:1;fill-rule:evenodd;stroke:#373737;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="rect4153-9"
+       d="m 82.039124,950.5296 c 0,16.89602 20.904046,30.51847 46.900656,30.51847 l 473.18903,0 c 25.99734,0 46.90066,-13.62245 46.90066,-30.51847 l 0,-853.978094 c 0,-16.89589 -20.90418,-30.512634 -46.90066,-30.512634 l -473.18903,0 c -25.99656,0 -46.900656,13.616744 -46.900656,30.512634 l 0,853.978094 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient4229);stroke-width:11.40701294;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
   </g>
 </svg>