display of profile picture on many pages of HTML using HTML and javascript

Question

i am developing a game which has 4 levels and home page. In home page user selects one of the 4 images by selecting a radio button(there are 4 images on this page). This selected image should be displayed in all the levels(like profile picture u can say). But when user is defeated in any of the level he lands to home page(obviously he should be able to select new image) and the selected image would no more be displayed.

Iam developing this game only in HTML and javascript. Is it possible to do in HTML and javascript?If no then i know very very basics of php if it is implementable using PHP.

<input type="radio" name="profile" value="boy1" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="boy01.png" width="200" height="200" />

<input type="radio" name="profile" value="boy2" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="boy02.png" width="200" height="200" />

<input type="radio" name="profile" value="girl1" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="girl01.png" width="200" height="200" />

<input type="radio" name="profile" value="girl2" style="margin-left:40px;" onclick="location.href = 'firsta.html';"> 
<img style="margin-left:25px;" src="girl02.png" width="200" height="200" />

Answer 1

You could set the filename of the selected image into localStorage (or cookies) then read it again when you want to use it.

<input type="radio" name="profile" value="boy1.png" style="margin-left:40px;" onclick="chooseProfile(this.value, 'firsta.html')"> 
<img style="margin-left:25px;" src="boy01.png" width="200" height="200" />

In your Javascript:

function chooseProfile(img, page) {
  localStorage.profilePic = img;
  location.href = page;
}

Then when you want to read it:

document.getElementById('profileImage').src = localStorage.profilePic;