diff --git a/tree/.ipynb_checkpoints/0_start-checkpoint.html b/tree/.ipynb_checkpoints/0_start-checkpoint.html
index 7b1e33b..76f013d 100644
--- a/tree/.ipynb_checkpoints/0_start-checkpoint.html
+++ b/tree/.ipynb_checkpoints/0_start-checkpoint.html
@@ -3,18 +3,25 @@
 <head>
       <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-    <title>start</title>
+    <title>bench</title>
     <link rel="stylesheet" href="index.css">
     
 </head>
 <body>
-    <h1> start</h1>
-    <p> Hello <div id="player_img"></div>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late. 
+    <p> Hello <div id="player_img"> </div>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late. 
 You spot a copy of today's newspaper on the bench. Maybe you want to <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
 
 
 
 <script src="jquery.min.js"></script>
+  <script>
+    console.log (localStorage.myavatar)
+    var img = document.createElement("img");
+    img.src = localStorage.myavatar;
+    var player_img = document.querySelector("#player_img");
+    player_img.appendChild(img);
+ </script>
+    
 <script type="text/javascript" src="index.js" ></script>
     
 </body>
\ No newline at end of file
diff --git a/tree/.ipynb_checkpoints/index-checkpoint.html b/tree/.ipynb_checkpoints/index-checkpoint.html
index f219729..7ddf281 100644
--- a/tree/.ipynb_checkpoints/index-checkpoint.html
+++ b/tree/.ipynb_checkpoints/index-checkpoint.html
@@ -9,13 +9,13 @@
 </head>
 <body>
     <div class="introtext">
-    welcome to *name*, in this story you will be someone called <form><input type="text" placeholder="enter you name" id="player_name" name="player_name"></form>.
+    welcome to *name*, in this story you will be someone called <form><input type="text" placeholder="enter you name" id="player_name" name="player_name"></form>.<br>
    You will look like         
-   <form>
-  <input type="checkbox" id="player1" name="player1" value="">
-  <label for="player1"><img id="player_img_1" src="imgs/dog1.gif" width="100px"></label><br>
+   <form id="avatar_form" >
+  <input type="radio" id="player1" name="player_avatar" value="imgs/dog1.gif">
+  <label for="player1"><img id="player_img_1" src="imgs/dog1.gif" width="100px"></label>
        or like 
-  <input type="checkbox" id="player2" name="player2" value="">
+  <input type="radio" id="player2" name="player_avatar" value="imgs/dog2.gif">
   <label for="player2"> <img id="player_img_2" src="imgs/dog2.gif" width="100px"></label><br>
 
         </form>    
diff --git a/tree/.ipynb_checkpoints/index-checkpoint.js b/tree/.ipynb_checkpoints/index-checkpoint.js
new file mode 100644
index 0000000..bdd4cfb
--- /dev/null
+++ b/tree/.ipynb_checkpoints/index-checkpoint.js
@@ -0,0 +1,15 @@
+//store form's value in localStorage
+
+var f = document.querySelector("form#avatar_form")
+f.onchange = updateAvatar 
+ 
+document.querySelector("#player1").onchange = updateAvatar
+document.querySelector("#player2").onchange = updateAvatar
+
+function updateAvatar () {
+    console.log("CHANGE");
+    var fd = new FormData(f)
+    var avatar=fd.get("player_avatar")
+    console.log("avatar", avatar);
+    localStorage.myavatar=avatar 
+}
diff --git a/tree/0_start.html b/tree/0_start.html
index 7b1e33b..76f013d 100644
--- a/tree/0_start.html
+++ b/tree/0_start.html
@@ -3,18 +3,25 @@
 <head>
       <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-    <title>start</title>
+    <title>bench</title>
     <link rel="stylesheet" href="index.css">
     
 </head>
 <body>
-    <h1> start</h1>
-    <p> Hello <div id="player_img"></div>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late. 
+    <p> Hello <div id="player_img"> </div>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late. 
 You spot a copy of today's newspaper on the bench. Maybe you want to <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
 
 
 
 <script src="jquery.min.js"></script>
+  <script>
+    console.log (localStorage.myavatar)
+    var img = document.createElement("img");
+    img.src = localStorage.myavatar;
+    var player_img = document.querySelector("#player_img");
+    player_img.appendChild(img);
+ </script>
+    
 <script type="text/javascript" src="index.js" ></script>
     
 </body>
\ No newline at end of file
diff --git a/tree/index.html b/tree/index.html
index 54e307c..7ddf281 100644
--- a/tree/index.html
+++ b/tree/index.html
@@ -11,11 +11,11 @@
     <div class="introtext">
     welcome to *name*, in this story you will be someone called <form><input type="text" placeholder="enter you name" id="player_name" name="player_name"></form>.<br>
    You will look like         
-   <form>
-  <input type="checkbox" id="player1" name="player1" value="">
+   <form id="avatar_form" >
+  <input type="radio" id="player1" name="player_avatar" value="imgs/dog1.gif">
   <label for="player1"><img id="player_img_1" src="imgs/dog1.gif" width="100px"></label>
        or like 
-  <input type="checkbox" id="player2" name="player2" value="">
+  <input type="radio" id="player2" name="player_avatar" value="imgs/dog2.gif">
   <label for="player2"> <img id="player_img_2" src="imgs/dog2.gif" width="100px"></label><br>
 
         </form>    
diff --git a/tree/index.js b/tree/index.js
index e69de29..bdd4cfb 100644
--- a/tree/index.js
+++ b/tree/index.js
@@ -0,0 +1,15 @@
+//store form's value in localStorage
+
+var f = document.querySelector("form#avatar_form")
+f.onchange = updateAvatar 
+ 
+document.querySelector("#player1").onchange = updateAvatar
+document.querySelector("#player2").onchange = updateAvatar
+
+function updateAvatar () {
+    console.log("CHANGE");
+    var fd = new FormData(f)
+    var avatar=fd.get("player_avatar")
+    console.log("avatar", avatar);
+    localStorage.myavatar=avatar 
+}
