Hi,
The back end of this is outside my scope but here is how to handle the front end ‘hide and show’ effect to give you a start.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- must have viewport meta tag for mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.questions {
max-width:600px;
margin:auto;
background:#f9f9f9;
padding:10px;
overflow:hidden;
}
.questions fieldset {
border:none;
margin:0;
}
.questions legend {
text-align:center;
tex-indent:0;
font-size:140%;
float:left;
width:100%;
clear:both;
margin:0 0 20px;
}
.btn, .close {
display:block;
border:none;
padding:0;
height:50px;
line-height:50px;
width:100%;
background:#1e73be;
color:#fff;
font-size:140%;
text-align:center;
margin:7px 0;
clear:both;
border-radius:6px;
transition:all .5s ease;
cursor:pointer;
}
.btn:hover, .close:hover {
background:red;
}
.check:checked + span {
background:red
}
.questions label {
display:block;
clear:both;
position:relative;
}
.questions label input {
position:absolute;
left:-999em;
}
.hide {
display:none
}
</style>
</head>
<body>
<form class="questions" name="form1" method="post" action="">
<fieldset>
<legend>1) How many times a week do you go to a cafe?</legend>
<label>
<input class="check" type="checkbox" name="CheckboxGroup1" value="0-1" id="CheckboxGroup1_0">
<span class="btn">0 to 1</span></label>
<label>
<input class="check" type="checkbox" name="CheckboxGroup1" value="2+" id="CheckboxGroup1_1">
<span class="btn">2+</span></label>
</fieldset>
<fieldset class="hide">
<legend>2) How many cups of coffee a day do you drink?</legend>
<label>
<input class="check" type="checkbox" name="CheckboxGroup2" value="0-1" id="CheckboxGroup2_0">
<span class="btn">0 to 1</span></label>
<label>
<input class="check" type="checkbox" name="CheckboxGroup2" value="3+" id="CheckboxGroup2_1">
<span class="btn">3+</span></label>
</fieldset>
<fieldset class="hide">
<legend>3) How many questionaires have you filled in today?</legend>
<label>
<input class="check" type="checkbox" name="CheckboxGroup3" value="None" id="CheckboxGroup3_0">
<span class="btn">None</span></label>
<label>
<input class="check" type="checkbox" name="CheckboxGroup3" value="1+" id="CheckboxGroup3_1">
<span class="btn">Millions</span></label>
</fieldset>
<fieldset class="hide">
<legend>You are awesome<br>
Thank you for helping!</legend>
</fieldset>
</form>
<!-- link to jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$( ".questions" ).on( "click", ".btn", function() {
$(this).closest('fieldset').hide().next('fieldset').fadeIn('slow');
});
</script>
</body>
</html>
The correct answers are held in the checked values of the checkboxes so you can send the form to the back end and interrogate as usual using ajax (or wait until the end and submit all).
You will need to send your data to your php page to update your database and you could do that with serialise and ajax as shown here.