What I'm trying to do: 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: 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.
This is fairly simple - create the questions / answers as a single form (easiest solution), creating buttons for each of the answers, and wrap each set of question / answer-buttons in a fieldset. Hide all but the first one of the fieldsets, so that when a user clicks the button, the next fieldset appears. Made a quick fiddle here: https://jsfiddle.net/03q6um0u/1/ - uncomment the javascript to see how it would work with javascript present. However, this is not a complete solution - you still need some way to save the input, and that's where ajax / storing stuff in a database comes in. That is a bit more complicated, however (especially since you'd want to store the input in such a way that you'd be able to do something with it, ie. make sure one user doesn't submit 100s of inputs, that you can track that users fill out all the inputs, etc.)
They seem to have stuff like this on Facebook. They ask a series of questions related to things like, "Which Star Wars character are you?"