php – How to store data for a test correctly?

Question:

Hello to all!

I want to write a test like this: https://mezoestetic.ru/mezotest/

I decided to start from scratch, but I ran into questions that I don’t know how to solve (because I’m still 0 in all this). Here's a workaround: https://codepen.io/anavozhko/pen/WOVvxr

Now it's all stored like this:

const myQuestions = [
        {
            parent: 0,
            id: 1,
            question:
                "Пройдите тест и узнайте, какой мезороллер и косметика подойдут Вам",
            answers: {
                1: "Волосы",
                2: "Глаза"
            }
        }, //...

Can you please tell me where and in what form it is better to store the data for this test (especially the results in the form of html-code)? I understand that keeping everything in a script is not good. Can store it all in the database and somehow get it with ajax? And, in general, am I moving in the right direction? Maybe you need to do everything differently?

PS: Please do not judge strictly. This is my first time learning js.

Answer:

Questions table: id (int A_I), questionText (text),

The table answerVariants id (int A_I), questionId (int), the number of the question to which this answer option is answerText (text),

Then to the file provider for the ajax request:

//(Using PDO)
$question = DataBase::fetchColumn("SELECT questionText FROM questions WHERE id = :id", ['id' => $id]));
$answers = DataBase::fetchAll("SELECT id,answerText FROM answers WHERE questionId = :questionId", ['questionId' => $id]);
echo json_encode(['success' => true, 'question' => $question, 'answers' => $answers]);

in total, we get something like:

(jsonObject)

{
    'success': true, 
    'question': "Мой вопрос номер 1?", 
    'answers': [
        ['id': 1, 'answerText' => "Ответ 1"], 
        ['id': 2, 'answerText' => "Ответ 2"]
    ]
}

Well, then for the AJAX output.

dataType: 'json',
success: function (questionObject) {
    if(questionObject.success === true) {
        $('#questionText').text(questionObject.question);
        $('#answersListUl').html("");
        (questionObject.answers).forEach(function (answerObject) {
            $('#answersListUl').append("<li id='answerId_" + answerObject.id"'>" + answerObject.answerText + "</li>");
        });
    }
}
Scroll to Top