Jquery Quiz

Building the quiz in pure jquery

HTML

<div class="wrapperquiz">

  <div class="quizvraag vraag1 doel">
    <p>
      Ik zou graag
    </p>
    <ul>
      <li> <button class="buttondoel"> <span>afvallen</span>

</button></li>
      <li> <button class="buttondoel"> <span>strakker worden</span>

</button></li>

  <li> <button class="buttondoel"> <span>fitter worden</span>

</button></li>

  <li> <button class="buttondoel"> <span>gezonder leven</span>

</button></li>
    </ul>
  </div>
  
  
  
  
  
  

  <div class="quizvraag vraag2 leeftijd">
    <p>
     
    </p>
    <ul>
      <li> <button class="leeftijdgoed"> <span> Ik ben een vrouw tussen 18 tot 34 jaar</span>

</button></li>
      <li> <button class="leeftijdgoed"> <span> Ik ben een vrouw tussen 35 tot 65 jaar</span>

</button></li>

<li> <button class="tejong"> <span> Ik ben jonger dan 18 jaar</span>

</button></li>

    </ul>
  </div>

  <div class="quizvraag vraag3 belangrijkste">
    <p>
      Voor mij is het belangrijkste bij een goede begeleiding
    </p>
    <ul>
      <li> <button class="buttonbelangrijkste"> <span>makkelijk vol te houden</span>

</button></li>
      <li> <button class="buttonbelangrijkste"> <span>flexibele begeleiding</span>

</button></li>

  <li> <button class="buttonbelangrijkste"> <span>persoonlijk begeleiding</span>

</button></li>

  <li> <button class="buttonbelangrijkste"> <span>dagelijkse coaching</span>

</button></li>
    </ul>
  </div>

  <div class="quizvraag vraag4 verzekering">
    <p>
      Mijn zorgverzekeraar is
    </p>
    <ul>
      <li> <button class="zorgverzekeraar atotf1"> <span>Aevitae (ASR/VGZ/Avero)</span>

</button></li>
      <li> <button class="zorgverzekeraar atotf2"> <span>AON Avero Achmea</span>

</button></li>

      <li> <button class="zorgverzekeraar atotf3"> <span>Avero Achmea</span>

</button></li>

      <li> <button class="zorgverzekeraar atotf4"> <span>AZVZ</span>

</button></li>

      <li> <button class="zorgverzekeraar atotf5"> <span>CZ</span>

</button></li>

      <li>...

CSS

body {
  background-color: #90c226;
}

.wrapperquiz p {
  text-align: center;
  font-family: Open Sans !important;
  font-size: 25px;
  letter-spacing: 1px;
}

.wrapperquiz button {
  min-width: 250px;
  margin: 10px;
  min-height: 60px;
  background-color: #90c226;
  border-color: white !important;
  border: solid 2px;
  box-shadow: none;
  color: white;
  font-size: 20px;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

.wrapperquiz button:hover {
  min-width: 250px;
  margin: 10px;
  min-height: 60px;
  background-color: black;
  border-color: black !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;
}

.wrapper h1 {
  text-align: center;
  font-family: sans-serif;
  background: green;
  color: #fff;
  padding: 3px;
  border-radius: 5px;
}

.wrapper #question {
  font-family: sans-serif;
  font-size: 30px;
  color: #5a6772;
}

.quizvraag,
.quizvraag ul {
  text-align: center;
  list-style: none !important;
}

.teksttejong {
  display: none;
}

.vraag2,
.vraag3,
.vraag4,
.vraag5,
.vraagsoort,
.vergoeding{
  display: none;
}

.vergoeding{
  line-height: 50px;
  margin-top: 50px;
  margin-right: 50px;
  margin-left: 50px;
  font-size: 25px;
text-align: center;
color: white;}

.vergoeding span {font-size: 12px;}


.aanmelden span {font-size: 27px;}

JavaScript

$(".buttondoel").click(function() {
  $(".vraag2").slideDown("slow");
  $(".vraag1").hide();

});

$(".leeftijdgoed").click(function() {
  $(".vraag3").slideDown("slow");
  $(".vraag2").hide();

});

$(".tejong").click(function() {
  $(".tejongtekst").slideDown("slow");
  $(".vraag2").hide();

});

$(".buttonbelangrijkste").click(function() {
  $(".vraag4").slideDown("slow");
  $(".vraag3").hide();

});




$(".atotf1").click(function() {
  $(".vraagatotf1").slideDown("slow");
  $(".vraag4").hide();
  });


  $(".atotf2").click(function() {
  $(".vergoedinggratis").slideDown("slow");
  $(".vraag4").hide();
  });

    $(".atotf3").click(function() {
   $(".vergoedinggratis").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".atotf4").click(function() {
  $(".vraagatotf4").slideDown("slow");
  $(".vraag4").hide();
});


    $(".atotf5").click(function() {
  $(".vraagatotf5").slideDown("slow");
  $(".vraag4").hide();
});

    $(".atotf6").click(function() {
  $(".vraagatotf6").slideDown("slow");
  $(".vraag4").hide();
});

    $(".atotf7").click(function() {
  $(".vraagatotf7").slideDown("slow");
  $(".vraag4").hide();
});

    $(".atotf8").click(function() {
  $(".vraagatotf8").slideDown("slow");
  $(".vraag4").hide();
});

    $(".gtotn1").click(function() {
  $(".vergoedinggratis").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".gtotn2").click(function() {
  $(".informatieIAK").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".gtotn3").click(function() {
  $(".vraaggtotn3").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".gtotn4").click(function() {
  $(".vraaggtotn4").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".gtotn5").click(function() {
  $(".vergoedinggratis").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".gtotn6").click(function() {
  $(".vraaggtotn6").slideDown("slow");
  $(".vraag4").hide();
  });

     $(".gtotn7").click(function() {
  $(".vraaggtotn7").slideDown("slow");
  $(".vraag4").hide();
 ...