How can I send the variable of a function to be stored in mysql server

[ednapadron]

Im working on a quizz with php mysql and javascript that consist in an array that stores the information in the following order: Question,option a, option b, option c, option d, option e, option f, and Im using a several functions to store the score and progress of the user, but do not have a clue on how to store this information in a database, so an administration is able to consult it in a further time. Here are the functions that are used in the program:

function populate() {
    if(quiz.isEnded()) {
        showScores();
    }
    else {
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        // show options
        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++) {
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
            guess("bt" + i, choices[i]);
        }

        showProgress();
    }
};

function guess(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
        quiz.guess(guess);
        populate();
    }
};


function showProgress() {
    var currentQuestionNumber = quiz.questionIndex + 1;
    var element = document.getElementById("progress");
    element.innerHTML = "Question number " + currentQuestionNumber + " de " + quiz.questions.length;
};

function showScores() {
    var gameOverHTML = "<h1>The test has ended</h1>";
    gameOverHTML += "<h2 id='score'> Result: " + quiz.score + "</h2>";
    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;

[Pepster64]

I created a high score table for a game that I did in vanilla js using fetch. Maybe it will give you some ideas for you own quiz.

/*
 * Create and Display High Score Table
 */
const displayHSTable = (info) => {
    info.forEach((value, index) => {
        var anchor = d.querySelector('.anchor');
        var trElement = anchor.appendChild(d.createElement('tr'));
        if ((index + 1) % 2 == 0) {
            trElement.className = 'active-row';
        }
        var tdPlayer = trElement.appendChild(d.createElement('td'));
        var tdPoints = trElement.appendChild(d.createElement('td'));
        tdPlayer.appendChild(d.createTextNode(value.player));
        tdPoints.appendChild(d.createTextNode(value.score));
    });
}

/* Save User Data to hs_table */
const saveHSTableSuccess = function (info) {

    if (info) {
        removeHighScores();
        createHSTable('retrieveHighScore.php', retrieveHSTableUISuccess, retrieveHSTableUIError);
    }

};

/* If Database Table fails to save data in mysql table */
const saveHSTableUIError = function (error) {
    console.log("Database Table did not load", error);
};


/* create FETCH request */
const saveHSTableRequest = (saveUrl, succeed, fail) => {
    fetch(saveUrl, {
        method: 'POST', // or 'PUT'
        body: JSON.stringify(hs_table)
    })
            .then((response) => handleErrors(response))
            .then((data) => succeed(data))
            .catch((error) => fail(error));
};

/* retrieve User Data from hs_table */
const retrieveHSTableUISuccess = function (info) {
    displayHSTable(info);

};

/* If Database Table fails to save data in mysql table */
const retrieveHSTableUIError = function (error) {
    console.log("Database Table did not load", error);
};

/* Create High Score Data using fetch */
const createHSTable = (retrieveUrl, succeed, fail) => {
    var max = 5; // Maximum Records to Be Displayed
    var maxium = {};
    maxium.max_limit = max;

    fetch(retrieveUrl, {
        method: 'POST', // or 'PUT'
        body: JSON.stringify(maxium)
    })
            .then((response) => handleErrors(response))
            .then((data) => succeed(data))
            .catch((error) => fail(error));
};

createHSTable('retrieveHighScore.php', retrieveHSTableUISuccess, retrieveHSTableUIError);