Multiple choice questions

HTML

<div class="questions">
  <h1> List of questions </h1>
  <br>
  <h4> Is Arja vert pretty? </h4>
  <br>
  <form id="question1">
    <input type="radio" name="q1" value="true"> yes!!!
    <input type="radio" name="q1" value="false"> slightly pretty
  </form>
  <br>
  <h4> would I love to have her with me and snuggle </h4>
  <br>
  <form id="question2">
    <input type="radio" name="q2" id="yes" value="true"> Yes
    <input type="radio" name="q2" id="No" value="false"> No
  </form>
    <div id="button">
    <input type="button" name="Valider" value="Valider">
  </div>

CSS

body {
     background-color: #87CEEB;
   }
   
   .questions {
     margin-left: 37%;
     margin-top: 48px;
     width: 20%;
     background-color: #F5F5F5;
     padding-left: 3%;
     padding-right: 4px;
     padding-bottom: 10px;
   }
   
   .validate {
     margin-left: 30%;
   }
   
   .results {
     visibility: visible;
   }

JavaScript

var answers = {
  question1: "true",
  question2: "true",
}
$("#button").click(function() {
  $.each(answers, function(id, value) {
    var selector = $("#" + id),
      correct = selector.find(":checked").val() === value;
    console.log(id, value, correct)
    selector.css("background-color",correct?"green":"red")
  })
});