<form>

  <div class="question" id="q1">
    <p>How well were your needs met?</p>
    <input type="radio" name="needs" id="a1" value="1">
    <label for="a1"></label>
    <input type="radio" name="needs" id="a2" value="2">
    <label for="a2"></label>
    <input type="radio" name="needs" id="a3" value="3">
    <label for="a3"></label>
    <input type="radio" name="needs" id="a4" value="4">
    <label for="a4"></label>
    <input type="radio" name="needs" id="a5" value="5">
    <label for="a5"></label>
  </div>

  <div class="question" id="q2">
    <p>How would you rate your overall experience?</p>
    <input type="radio" name="experience" id="b1" value="1">
    <label for="b1"></label>
    <input type="radio" name="experience" id="b2" value="2">
    <label for="b2"></label>
    <input type="radio" name="experience" id="b3" value="3">
    <label for="b3"></label>
    <input type="radio" name="experience" id="b4" value="4">
    <label for="b4"></label>
    <input type="radio" name="experience" id="b5" value="5">
    <label for="b5"></label>
  </div>

  <input type="submit" value="ok" id="submit">
</form>
label:before {
  content: '☆';
  color: white;
  font-size: 2em;
}
label.on:before {
  content: '★';
  color: white;
  /* uncomment for iOS */
/*   font-size: 2.4em;
  top: -0.1em;
  left: -0.1em; */
}
input:checked + label:before {
  content: '★'; 
  color: white;
  /* uncomment for iOS */
/*   font-size: 2.4em;
  top: -0.1em;
  left: -0.1em; */
}
label {  
  display: inline-block;  
  cursor: pointer;  
  position: relative;  
  padding-left: 25px;  
  margin-right: 15px;  
  font-size: 20px; 
}
label:before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  border-radius: 10px;
}
input[type=radio] {
  display: none;
  -webkit-appearance: none;
}

/* Non-essential */
body {
  margin: 2em;
  background-color: #448AC1;
  text-align: center;
  /* remove gray highlight on tap in iOS */
  -webkit-tap-highlight-color:transparent;
}
.question {
  margin-bottom: 8em;
}
#q1 {
  margin-top: 6em;
}
p {
  color: white;
  font-family: Bitter, sans-serif;
  font-size: 2em;
}
#submit {
  font-size: 24px;
  font-family: Bitter, sans-serif;
  color: #448AC1;
  background-color: white;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 40px;
}


 
$('input[type="radio"]').click(function() {
  var theNumber = $(this).attr('id').slice(-1);
  $(this).siblings('label').each(function() {
    var sibNumber = $(this).attr('for').slice(-1);
    if (sibNumber <= theNumber) {
      $(this).addClass('on');
    } else {
      $(this).removeClass('on');
    }
  });
});

External CSS

  1. https://fonts.googleapis.com/css?family=Bitter|Cardo:400italic

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js