<section class="demo-section">
  <form action="" method="post" id="demoForm">
  
  <div class="container">
  <div class="row g-3 gy-4 justify-content-between">

 <div class="col-md-4">
  <div class="quiz-card-content quiz-demo-image-bg quiz-demo-image-bg-01"> 
  <div class="quiz-card-input"><input type="text" class="quiz-input-text" name="question-01" maxlength="10" required autocomplete="off" /></div> 
  </div>
  </div>

 <div class="col-md-4">
  <div class="quiz-card-content quiz-demo-image-bg quiz-demo-image-bg-02"> 
  <div class="quiz-card-input"><input type="text" class="quiz-input-text" name="question-02" maxlength="10" required autocomplete="off" /></div> 
  </div>
  </div>

 <div class="col-md-4">
  <div class="quiz-card-content quiz-demo-image-bg quiz-demo-image-bg-03"> 
  <div class="quiz-card-input"><input type="text" class="quiz-input-text" name="question-03" maxlength="10" required autocomplete="off" /></div> 
  </div>
  </div>
  
  <div class="col-md-4">
  <div class="quiz-card-content quiz-demo-image-bg quiz-demo-image-bg-04"> 
  <div class="quiz-card-input"><input type="text" class="quiz-input-text" name="question-04" maxlength="10" required autocomplete="off" /></div> 
  </div>
  </div>
  
  <div class="col-md-4">
  <div class="quiz-card-content quiz-demo-image-bg quiz-demo-image-bg-05"> 
  <div class="quiz-card-input"><input type="text" class="quiz-input-text" name="question-05" maxlength="10" required autocomplete="off" /></div> 
  </div>
  </div>
  
  <div class="col-md-4">
  <div class="quiz-card-content quiz-demo-image-bg quiz-demo-image-bg-06"> 
  <div class="quiz-card-input"><input type="text" class="quiz-input-text" name="question-06" maxlength="10" required autocomplete="off" /></div> 
  </div>
  </div>

</div>
  </div> 
  
  <div class="container quiz-container-sub"> 
  <div class="row g-3 gy-4 justify-content-center">

 <div class="col-md-5">
  <div class="quiz-card-content-sub"> 
  <div class="message-container">
  <div id="message"></div>
  </div> 
  </div>
  </div>

 <div class="col-md-5">
  <div class="quiz-card-content-sub"> 
  <div class="button-container">
  <input type="submit" value="Submit" class="btn btn-secondary submit-button" />
  </div>
  </div>
  </div>

</div>
  </div> 
  
  </form> 
  </section>

.quiz-card-content {
  background-color: rgba(255, 255, 255, 0.44);
  padding: 10px;
  text-align: center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, 
  rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.quiz-card-image {
  border: 4px solid rgba(0, 0, 0, 0.24);
  height: 120px;
  width: 120px;
  border-radius: 100%;
  padding: 10px;
  background: radial-gradient(592px at 48.2% 50%, 
  rgba(255, 255, 249, 0.6) 0%, 
  rgb(160, 199, 254) 74.6%);
  margin: 0 auto;
}
  
.quiz-card-image img {
  height: 90px;
}
  
.quiz-card-input {
  margin-top: 140px;
} 
  
.quiz-card-input input {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.14);
} 
  
.button-container  {
  text-align: right;
}
  
.submit-button {
  width: 100%;
  text-align: center;
  padding: 4px 20px;
}

.message-container {
  background-color: rgba(255, 118, 0, 0.20);
  border-radius: 4px;
  text-align: center;
  padding: 6px 20px;
}
  
.quiz-container-sub {
  padding: 2em 0;
}
  
/* demo quiz images */
  
.quiz-demo-image-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
  
.quiz-demo-image-bg-01 {
  background-image: url("photos/bear.jpg")
} 
  
.quiz-demo-image-bg-02 {
  background-image: url("photos/fox.jpg")
}
  
.quiz-demo-image-bg-03 {
  background-image: url("photos/hedgehog.jpg")
}
  
.quiz-demo-image-bg-04 {
  background-image: url("photos/lion.jpg")
}
  
.quiz-demo-image-bg-05 {
  background-image: url("photos/turtle.jpg")
}

.quiz-demo-image-bg-06 {
  background-image: url("photos/zebra.jpg")
}

<script>
$(function () {
$("#message").html("Enter the name of the animal you see in each input field");
$('#demoForm').on('submit', function (event) {
$.ajax({
type: 'post',
url: 'post.php',
data: $('#demoForm').serialize(),
success: function (data) {
$("#message").html(data);
}
});
event.preventDefault();
});
});
</script>

<?php
  $answer_01 = $_POST['question-01'];
  $answer_02 = $_POST['question-02'];
  $answer_03 = $_POST['question-03'];
  $answer_04 = $_POST['question-04'];
  $answer_05 = $_POST['question-05'];
  $answer_06 = $_POST['question-06'];

$totalRight = 0;

if ($answer_01 == "bear" or $answer_01 == "Bear") { $totalRight++; }
  if ($answer_02 == "fox" or $answer_02 == "Fox") { $totalRight++; }
  if ($answer_03 == "hedgehog" or $answer_03 == "Hedgehog") { $totalRight++; }
  if ($answer_04 == "lion" or $answer_04 == "Lion") { $totalRight++; }
  if ($answer_05 == "turtle" or $answer_05 == "Turtle") { $totalRight++; }
  if ($answer_06 == "zebra" or $answer_06 == "Zebra") { $totalRight++; }

// result:

if ($totalRight == 0 ) {
  $result = "<strong>All</strong> answers are <strong>incorrent</strong>";
  }

if ($totalRight == 1 ) {
  $result = "Only <strong>one</strong> answer is <strong>correct</strong>";
  }

if ($totalRight == 2 ) {
  $result = "<strong>Two</strong> answers are <strong>correct</strong>";
  }

if ($totalRight == 3 ) {
  $result = "<strong>Three</strong> answers are <strong>correct</strong>";
  }

if ($totalRight == 4 ) {
  $result = "<strong>Four</strong> answers are <strong>correct</strong>";
  }

if ($totalRight == 5 ) {
  $result = "<strong>Five</strong> answers are <strong>correct</strong>";
  }

if ($totalRight == 6 ) {
  $result = "<strong>All</strong> answers are <strong>correct</strong>";
  }

echo "" . $result . "";
  ?>