Reloading content from a database onclick

Question

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.

Your problem is that getQuestion($db) only has one result - it is randomly chosen each time you load the page, but that just generates a hard-coded JSON string which is inside JS function you're running on click. (Check the HTML source of your page if you don't believe me.) To randomly generate a new question on click, you either need to make an Ajax call to your PHP script, or use JS to randomly select a question from an array of questions (in this case you need to change your PHP so that it brings back an array of several questions). — Robin Zigmond
– Robin Zigmond, Commented May 11, 2019 at 15:08
I went with the second way but I don't really know how to iterate over all the questions. At the moment I just use a counter and exit calling the function if it is 10. Maybe there is a better way to do that? I updated my code, maybe you could get a look. Thanks :) — Green
– Green, Commented May 11, 2019 at 21:22

Klienblat Moshe · Accepted Answer · 2019-09-08 14:26:00Z

the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>

    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
<article id="quiz-site">
    <section id="quiz">

    </section>
</article>
</body>
</html>

the JavaScript(app.js):

$(document).ready( function(){

    let quiz = $("#quiz");
    let questionsArray;

    $.ajax({

        url: './questions.php',
        type: 'POST',
        data: "" ,
        processData: false,
        contentType: false,

        complete: function(result) {

            let questions = JSON.parse(result.responseText);

            // this part converts the object to an array so we can use the shift method to pull
            // the pointed item from the array
            questionsArray = Object.keys(questions).map(function(key) {
                return [(key), questions[key]];
            });

            let question = questionsArray.shift();
            updateDOM(question[1]);


        }

    });



    $(document).on('click', '.answer', function (e) {

        let question = questionsArray.shift();
            if(question !== undefined) {
                updateDOM(question[1]);
            }
    });

    updateDOM = (question) => {

            let answer = `<section id="question">${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>`;
            quiz.html ('');
            quiz.append(answer);


    };



   
});

the PHP(questions.php):

<?php

    echo json_encode([  'q1' => 'how much is 2*3?',
                        'q2' => 'how much is 2*4?',
                        'q3' => 'how much is 2*5?'
                    ]);

Collectives™ on Stack Overflow

Reloading content from a database onclick

1 Answer 1

the HTML:

the JavaScript(app.js):

the PHP(questions.php):

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

the HTML:

the JavaScript(app.js):

the PHP(questions.php):

Comments

Related