Question

我想写一个小测验应用程序。问题是如果我尝试通过执行select select onclick调用函数来获取新问题，则不会出现新问题。它什么都不做。

我尝试了两种不同的方法： -我试图用一个选择选择所有十个问题，但是我找不到如何将多数组传递给javascript的方法 -然后，我每次回答问题（单击答案时）都只选择一个新问题。

我不太确定哪种解决方案是更好的方法。我猜我的程序逻辑有些问题，但我真的不知道。如果有人可以帮助我，那就太好了。这是我的代码：

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>

我将第一个问题正确地插入到这些部分中，但是，当我单击答案时，它什么也没做。

Answer 1

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>

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);


    };



   
});

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?'
                    ]);

从onclick

1 个答案:

HTML：

JavaScript（app.js）：

PHP（questions.php）：