CODEWITHSUNDEEP
phpjavascriptjquery
Venkateshwaran Selvaraj
Venkateshwaran Selvaraj

Reputation: 1785

Hide next button for last quiz in quiz application

I am making an quiz application using PHP. Right now the problem is even for the last question it is showing next button as shown in the image quiz

Since the questions dynamically fetched from db there are no pages for each question. So I am not able to specify at what point it should hide next button (what if I have 1000 questions). I have tried with JavaScript. It doesn't quiet seem to work.

Update Source code

Upvotes: 1

Views: 2488

Answers (4)

DACrosby
DACrosby

Reputation: 11440

I'm not entirely sure of your database structure so its hard to test, but I believe a subquery to grab the last id of each quiz will get you what you need.

SELECT questions.*,
/* Add subquery to get last id */
(SELECT MAX(qid) FROM questionsforquiz WHERE questionsforquiz.quizId = $quizId) as last_id
FROM questions
JOIN questionsforquiz 
ON questions.qid = questionsforquiz.qid
WHERE questionsforquiz.quizId = $quizId
ORDER BY RAND()

Now you can simply check if the current question's qui is the MAX(qid) and if so, disable the navigation button.

if($qId == $last_id) {
    // print disabled nav button
} else {
    // print active nav button
}

Upvotes: 0

Oriol
Oriol

Reputation: 288100

Demo: http://jsfiddle.net/e4Ny6/2/

Use

var numQuestions,
    navs;
function init() {
  cd();
  numQuestions = document.getElementsByClassName("qButton").length;
  navs = document.getElementsByClassName('navbutton');
  show(0);
}

function show(i) {
    document.getElementsByClassName("current")[0].className="qButton";
    document.getElementsByClassName("active")[0].className="qPanel";

    document.getElementsByClassName("qPanel")[i].className+=" active";
    document.getElementsByClassName("qButton")[i].className+=" current";

    navs[0].style.display = i===0 ? 'none' : '';
    navs[1].style.display = i===numQuestions-1 ? 'none' : '';

    currentQuestion=i;
}

... instead of your functions init and show.

Offtopic:

If you want to improve performance, store all document.getElementsByClassName calls in variable inside init(). This way you only do those expensive calls once.

Upvotes: 1

PlantTheIdea
PlantTheIdea

Reputation: 16359

I'll give this a try, but no promises since I'm at work and your source code is ... well, not immediately transparent.

1) Add an extra class or id to the navbuttons:

<a id='previousbutton' class='navbutton' onclick='nav(-1)'>&laquo; Previous Question</a>
<a id='nextbutton' class='navbutton' onclick='nav(1)'>Next Question &raquo;</a>

2) Simple if statement at the end of the show function when page is loaded to check index

var cnt = document.getElementsByClassName("qButton").length-1;

if(i === cnt){
    document.getElementById('nextbutton').style.display = 'none';
} else {
    document.getElementById('nextbutton').style.display = 'block';
}

You can elaborate on it more if you'd like, but thats the general idea.

Upvotes: 0

Limeoats
Limeoats

Reputation: 426

If the questions are being dynamically queried from the database, your resultset's size should be the number of questions that will show up in your quiz. You can then use javascript to check if the question number is equal to the number of total questions. If it is not, you can show the next question button. If it is, then the user is on the last question and you should not show the button.

Upvotes: 0

Related Questions