Create a “Question + Two Answer” questionnaire in the form of a header and two buttons(I’d show pictures but insufficient reputation). Whatever answer is clicked is then recorded to a server side database which I’m able to view(cumulative). The database is updated each time another answer is clicked. This processes cycles through X number of questions and answer sets until no more question are left, and the visitors are left with a “Thank you for answering.”
I want this:
To fade-out, fade-in to this:
and when all questions are complete, fade-out, fade-in to this: imgur.com/fsIgDkI.png
while the answers and their respective questions are recorded somewhere for only me to see.
Further Example:
I have four questions, each question as a unique set of answers. Q1 has A1a & A1b, Q2 has A2a & A2b, Q3 has A3a & A3b, and Q4 has A4a & A4b.
How do I set them up so that the questions and corresponding answers replace each other, starting from Q1 to Q4? I’d like the user to click an answer to trigger the next question & answers replacement.
What I’ve done, found, and where I’m at now:
I have little experience with databases, so please forgive my lack of knowledge. I’ve comfortable with CSS, HTML, and started with jQuery. To solve the problem, I’ve been trying to get a simple bootstrap buttons text to be replaced with new text, every time it’s clicked. Can’t do it. Once, sure, but multiple times, no. I’ve tried replacing and hiding elements, but that hasn’t worked. I’ve tried modifying a count click code button. The only code I have now is the HTML and CSS, and it’s in a CMS child theme that I can modify. I’ve looked at hundreds of answers and websites to get a response in some direction, and all I can see is that I have to learn PHP, mySQL, jQuery/Javascript in their entirety to make this–what I thought–simple change. I don’t know how to accomplish it otherwise.
I’m completely lost.
Thanks for all your help. This issues been plaguing me for too long.
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.
