I am trying to build quiz which should work according to the following sequence:
- Welcome screen with START button
- after clicking START one question from the database (mySQL) is drawn and displayed on the screen (only one question is visible for user),
- User have to choose option A or B
- after clicking A or B (answer should be written to the array), then next question is drawn from the database (the question number cannot be repeated)
- User have to choose option A or B
etc.. etc... until user answers for 10 random questions
after 10 answers I want SELECT from database gratulations referring to all the answers (WHERE IN)
index.php (main file):
<!doctype html>
<head></head>
<div>
Some informations - only text
</div>
<div class ="quiz" id="quiz">
<?php
include 'quiz.php';
?>
</div>quiz.php:
<?php
include 'draw-questions.php';
header('Content-Type: application/json');
$aResult = array();
if (isset($_POST['start-quiz'])) { $option = "start"; }
if( isset($_POST['next-question_a']) ) { $option = "next"; }
if( isset($_POST['next-question_b']) ) { $option = "next"; }
switch ($option){
case 'start':
$index = 0;
$draw_q_ID = DrawQuestion();
$q_ID = $draw_q_ID[$index];
$drawn_question = PickQuestion($q_ID);
$question = explode(",", $drawn_question);
RunQuiz();
break;
case 'next':
$index++;
$q_ID = $draw_q_ID[$index];
$drawn_question = PickQuestion($q_ID);
$question = explode(",", $drawn_question);
RunQuiz();
break;
default:
echo"
<div class='quiz-intro'>
welcome text
</div>
<form method='POST' action='' >
<input type='submit' id='start-quiz' name='start-quiz' value='START'>
</form>
";
break;
}
function RunQuiz(){
?>
<script>
const myNode2 = document.getElementById("quiz");
while (myNode2.firstChild) {
myNode2.removeChild(myNode2.lastChild);
}
</script>
<?php
global $question;
echo "
<div class='container' id='quiz-form'>
<div class='row'>
<div class='col-md-5' id='opcja_A' value='$question[0]'>
<input type='submit' id='next-question_a' name='next-question' value='$question[0]' style='color: rgba(0, 0, 0,0)'>
<img src='../img_d/$question[1]' style='width:80%; padding: 20px 0'>
<h2>$question[0]</h2>
</div>
<div class='col-md-2'>
<img src='../img_d/vs.png' style='width:40%; padding-top:10rem'>
</div>
<div class='col-md-5' id='opcja_B' value='$question[2]''>
<input type='submit' id='next-question_b' name='next-question' value='$question[2]' style='color: rgba(0, 0, 0,0)'>
<img src='../img_d/$question[3]' style='width:80%; padding: 20px 0'>
<h2>$question[2]</h2>
</div>
</div>
</div>
";draw-questions.php:
<?php
function DrawQuestion(){
$q_ID = array();
while(sizeof($q_ID)<=30) {
$number = str_pad(rand(1, 57), 2, "0", STR_PAD_LEFT);
if (!in_array($number, $q_ID)) {
array_push($q_ID, $number);
}
}
return $q_ID;
}
function PickQuestion($q_ID){
require '../config/db_connection.php';
$quiz = "SELECT * FROM `quiz` WHERE `d_id` = '$q_ID'";
$db = getConnection();
$stmt = $db->prepare($quiz);
$stmt->execute();
while ($row_quiz = $stmt->fetch()) {
$question_a = $row_quiz['d_a'];
$question_a_image = $row_quiz['d_a_image'];
$question_b = $row_quiz['d_b'];
$question_b_image = $row_quiz['d_b_image'];
}
$result = $question_a.','.$question_a_image.','.$question_b.','.$question_b_image;
return $result;
}I think about it and try to solve my problem for a long time. All the time I have a problem with writing the answers to the array and drawing another question. Using I always lose the answers and number of questions I already have the answer. Of course I can draw 10 questions at once, but the problem is to display them one at a time and collect answers somewhere.
Any suggestions, tips how should I approach this? How can I store answer after clicking answer and go to next question without loosing questions id's and answers?
I also tried JS and jQuery How can I call PHP functions by JavaScript? but with no results
