Quiz

How to make required

by deorka12

HTML

<html>

  <head>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>


  <body>
    <div class="grid-container">

      <div class="header">
        <h1>Wich animal are you?</h1>
      </div>

      <div class="left"> </div>

      <div class="middle">
        <form id="personalityQuiz" class="answers">

          <div class="slide active-slide">

            <h3> 1. First of all, how would you describe your height as...</h3>
            <input type="radio" name="height" value="q011" required>Short<br>
            <input type="radio" name="height" value="q012" required>Average<br>
            <input type="radio" name="height" value="q013" required>Tall<br>

            <input type="button" class="btnNext1" value="Next">

          </div>
          <div class="slide">
            <h3> 2. Your eyes are...</h3>
            <input type="radio" name="eyes" value="q021" required>Brown<br>
            <input type="radio" name="eyes" value="q022" required>Hazel<br>
            <input type="radio" name="eyes" value="q023" required>Green<br>


            <input type="button" class="btnNext1" value="Next">

          </div>
          <div class="slide">

            <h3> 3. In my free time I like to... </h3>
            <input type="radio" name="hobby" value="q031" required>play sports<br>
            <input type="radio" name="hobby" value="q032" required>be outside<br>
            <input type="radio" name="hobby" value="q033" required>hang out with friends<br>

            <input type="submit" value="Submit">
          </div>




      </div>
      </form>

      <div class="result" id=cat> you are a cat</div>
      <div class="result" id=dog> you are a dog</div>
      <div class="result" id=horse> you are a horse</div>
      <div class="result" id=fish> you are a fish</div>
      <div class="result" id=lion> you are a lion</div>




      <script type='text/javascript'...

CSS

@import url('https://fonts.googleapis.com/css?family=Barlow');
.result {
  display: none
}

* {
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-areas: 'header header header header header header' 'left middle middle middle middle right' 'footer footer footer footer footer footer';

}

.left,
.middle,
.right {
  padding: 10px;
}

.left {
  grid-area: left;
}


.middle {
  grid-area: middle;
}


.right {
  grid-area: right;
}


.footer {
  grid-area: footer;
  padding: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-areas: 'header header header header header header' 'left left left left left left' 'middle middle middle middle middle middle' 'right right right right right right' 'footer footer footer footer footer footer';
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-image: url("background1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.answers {
  margin-left: 10%;
}

.answers h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: bold;
}

.answers {
  font-family: 'Barlow', sans-serif;
}

.lotrfont {
  font-family: 'ringbearermedium', Arial, sans-serif;
  font-size: 50px;
  color: black;
  text-align: center;
}

/*
.answers h3 {
  text-align: center;
}

.answers input{
    line-height: 200px;
}
*/

input[type=submit] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 50px;
  text-decoration: none;
  margin: 20px 2px;
  cursor: pointer;
}

#opvulling {
  margin: 250px;
}

.footer {
  color: white;
}

.gif {
  width: 55%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-family: 'Barlow', sans-serif;
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slide {
  display: none;
}

.slide.active-slide {
  display: block;
}

.btnNext1 {
  background-color: #a6d8a8;
  border: none;
  color: white;
  padding: 10px 50px;
  text-decoration: none;
  margin:...

JavaScript

$("#personalityQuiz").submit(function(event) {

  var qalookup = {
    "q011": ["cat", "dog"],
    "q012": ["fish"],
    "q013": ["lion", "horse"],

    "q021": ["horse"],
    "q022": ["lion"],
    "q023": ["fish", "dog", "cat"],

    "q031": ["fish"],
    "q032": ["dog", "cat"],
    "q033": ["lion", "horse"],
  };

  event.preventDefault();
  var answers = $(this).serializeArray();
  var scores = {
    cat: 0,
    dog: 0,
    horse: 0,
    fish: 0,
    lion: 0
  };

  $(".result").hide();

  for (var answer of answers) {
    var ans = qalookup[answer.value];
    ans.forEach(function(val) {
      scores[val] += 1;
    });
  }

  var maxAnimal = "cat";
  for (var animal in scores) {
    if (scores[animal] > scores[maxAnimal]) {
      maxAnimal = animal;
    }
  }

  $("#personalityQuiz").css('display', 'none');
  $(".result#" + maxAnimal).css('display', 'block');

});

$('.btnNext1').click(function() {

  var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
    $(this).removeClass('active-slide');
    currentSlide.next().stop().fadeIn(500).addClass('active-slide');
  });
});