So, hello everyone, my name is Plamen, I'm 18 from Bulgaria and in a quick change of subject, I'm need of your help. I've made a simple difficulty bar for a tutorial website which when hovered over must display the difficulty of the tutorial. But currently it's level is fixed (just so I can show you the concept). I need it to be changed by the user e.g. When a user posts a new tutorial, he chooses a difficulty for it, lets say from 1 to 5 and if he chooses 1 then:

.diffbar:hover .difflvl {
right: 240px;
background: lightgreen;
}

...if he chooses 2 then:

.diffbar:hover .difflvl {
right: 180px;
background: green;
}

and so on, so I don't have to adjust it manually... Something like an if statement e.g. in a perfect world- something like:

if inputdifficulty= 1 then
right: 180px;
background: green;
end if

So any advice will be appreciated. And please have in mind I'm not really experienced, so it might take some extra explaining. Thanks :)

Codepen: http://cdpn.io/yaxrJ