I want to create a Quiz. For that I have multiple choice questions. I dont want to show all the questions on the same page at a time. I want that only one question should be displayed at a time and when button is clicked, question in next division should appear and previous question should hide. At last, when user submits the last question, it should take it to the results page that would be basic php. But how to do that show/hide part? I am a newbie in these. Please don't take me as a professional.
here's my code.
<html>
<body>
<div id="div1">
<input type="radio" name="que1" value="Option1">
<input type="radio" name="que1" value="Option2">
<input type="radio" name="que1" value="Option3">
<input type="radio" name="que1" value="Option4">
<button id ="button1">Next</button>
</div>
<div id="div2">
<input type="radio" name="que2" value="Opt1">
<input type="radio" name="que2" value="Opt2">
<input type="radio" name="que2" value="Opt3">
<input type="radio" name="que2" value="Opt4">
<button id ="button2">Next</button>
</div>
<div id="div3">
<input type="radio" name="que3" value="1">
<input type="radio" name="que3"value="2">
<input type="radio" name="que3"value="3">
<input type="radio" name="que3" value="4">
<button id ="button3">Next</button>
</div>
</body>
</html>
I would recommend to add a class to the div elements, but just as working example for your current markup using jQuery, following example Fiddle for the show/hide part.
Hide all div sections with CSS, display the first div initially, and when the button is clicked, hide all div elements and display the next div based on the index of the current div in case it's not the last div / question.
CSS:
div {
display:none;
}
jQuery:
$(document).ready(function () {
$("div:eq(0)").show();
$("button").click(function () {
var questions = $("div").length;
var current = $(this).parent("div").index();
$("div").hide();
if (current < questions - 1) {
$("div:eq(" + (current + 1) + ")").show();
} else {
alert("no questions left, go to results");
}
});
});
I've tried to add this as stack snippet but for reasons unknown didn't get it to work, therefore above Fiddle instead.
Update: For the additional question in the comment, you can e.g. save the value of each answer as data attribute like this:
$(document).ready(function () {
$("div:eq(0)").show();
$("button").click(function () {
var questions = $("div").length;
var current = $(this).parent("div").index();
var answer = $(this).parent("div").find("input:checked").val();
alert(answer);
$(this).parent("div").data("answer", answer);
$("div").hide();
if (current < questions - 1) {
$("div:eq(" + (current + 1) + ")").show();
} else {
var answers = [];
$("div").each(function(i){
answers[i] = $(this).data("answer");
});
console.log(answers);
alert("no questions left, go to results");
}
});
});
and then loop over all question div elements to fetch the values and add them to an array for further processing / checking if each answer is true or not. Updated Fiddle displaying the array as console log message.
hope you may be able to show the first page with a single question. Now use buttons id as the next div id of the question. Let me clear you if a next button with id 2 has been clicked the next div with id 2 will be shown and remaining div & buttons less then 3 or greater then 3 will be hidden. At last you may determine the last page by the id of the last finish button can be shown.
This works (demo on jsfiddle) I made a little change to your html, look here:
<body>
<div class = "question">
First Question
<input type="radio" name="que1" value="Option1">
<input type="radio" name="que1" value="Option2">
<input type="radio" name="que1" value="Option3">
<input type="radio" name="que1" value="Option4">
<button class = "btn-next" data-question-number = "1">Next</button>
</div>
<div class = "question">
Second Question
<input type="radio" name="que2" value="Opt1">
<input type="radio" name="que2" value="Opt2">
<input type="radio" name="que2" value="Opt3">
<input type="radio" name="que2" value="Opt4">
<button class = "btn-next" data-question-number = "2">Next</button>
</div>
<div class = "question">
Third Question
<input type="radio" name="que3" value="1">
<input type="radio" name="que3"value="2">
<input type="radio" name="que3"value="3">
<input type="radio" name="que3" value="4">
<button class = "btn-next" data-question-number = "3">Next</button>
</div>
Css:
.question{
display:none;
}
jquery:
//show the first question on the page loads
$("button.btn-next").eq(0).parent().fadeIn()
$(".btn-next").on("click", function(){
var question_number = $(this).data("question-number")
// question_number = index + 1
var next_question = $("button.btn-next").eq(question_number).parent()
if(question_number < $(".question").length){
var parent_row =$(this).parent()
parent_row.hide()
next_question.fadeIn()
}else{
//your logic here
}
});
Here's my try. The code is commented wherever possible.
// This is short for $(document).ready(...)
$(function(){
// Store our questions in a variable
var $questions = $('.question');
// Show the first question
$questions.first().show();
// When clicking the <button> in ny of the questions...
$questions.find('button').on('click',function(){
// ...store the currently visible question, then...
var $visibleQuestion = $questions.filter(':visible');
// ...if there's a next question....
var $nextQuestion = $visibleQuestion.next('.question');
console.log($nextQuestion);
if ($nextQuestion.length === 1){
// ...hide the visible question....
$visibleQuestion.hide();
// ..and show the next.
$nextQuestion.show();
}
// If you want, you can check for quiz completition in this else section
else {
// Quiz finished
alert('You finished the quiz!');
}
});
// Optionally, change the text of the last question's button
$questions.last().find('button').text('Finish Quiz');
});/* Initially hide all questions, we'll show them later with JavaScript */
.question { display: none }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- The <div> elements now have the class "question" -->
<div id="div1" class="question">
<input type="radio" name="que1" value="Option1">
<input type="radio" name="que1" value="Option2">
<input type="radio" name="que1" value="Option3">
<input type="radio" name="que1" value="Option4">
<button id ="button1">Next</button>
</div>
<div id="div2" class="question">
<input type="radio" name="que2" value="Opt1">
<input type="radio" name="que2" value="Opt2">
<input type="radio" name="que2" value="Opt3">
<input type="radio" name="que2" value="Opt4">
<button id ="button2">Next</button>
</div>
<div id="div3" class="question">
<input type="radio" name="que3" value="1">
<input type="radio" name="que3"value="2">
<input type="radio" name="que3"value="3">
<input type="radio" name="que3" value="4">
<button id ="button3">Next</button>
</div>As for the PHP result processing part, I would suggest that you ask that as a separate question.
</div>