I want to write a little quiz app. The problem is if I try to get a new question by calling a function with executes a select onclick, no new question appears. It just do nothing.
I tried two different ways: -I tried to select all ten questions with one select, but I couldn't find out how to pass the multi array to javascript -Then I tried to select only one new question every time I answer a question (onclick on an answer).
I'm not quite sure which solution is the better way to do that. I guess there is something wrong with the logic in my program but I really don't know. It would be great if someone could help me out with that. Here is my code:
php
$questions = $db->excSelect("SELECT * FROM question WHERE art = 0 ORDER BY RAND() LIMIT 10");
function getQuestion($questions) {
return json_encode($questions);
}
javascript
$().ready(function() {
var questionNumber = 0;
var question = JSON.parse('<?php echo getQuestion($questions); ?>');
function showQuestion() {
$("#question").text(question[questionNumber].question);
$("#answer-1").text(question[questionNumber].answer_1);
$("#answer-2").text(question[questionNumber].answer_2);
$("#answer-3").text(question[questionNumber].answer_3);
$("#answer-4").text(question[questionNumber].answer_4);
questionNumber++;
}
showQuestion();
$(".answer").click(function() {
if (questionNumber != 10) { showQuestion(); }
else { $("#quiz-site").text("EVALUATION"); }
});
});
html
<article id="quiz-site">
<section id="quiz">
<section id="question"></section>
<section class="block1">
<section id="answer-1" class="answer"></section>
<section id="answer-2" class="answer"></section>
</section>
<section class="block2">
<section id="answer-3" class="answer"></section>
<section id="answer-4" class="answer"></section>
</section>
</section>
</article>
I get the first question correctly inserted into the sections, but as soon as I click on an answer it does nothing.