JavaScript How do I log results for a leaderboard?

[Edrol97]

I'm wanting to log results for a specific quiz game I've made for a leaderboard. How would I do this in js? The quiz game would be for a corporate workshop that I am eventually going to be running and I'm just trying to have a bit of fun at work by coding this. I've got a base of the game and quiz live at this link, but yeah. If this is possible it would be great. I would have to see the results of people who did the quiz whilst on the workshop in order to adjudicate, so yeah. How could I do this?

 

[JimmysNetwork]

I'm wanting to log results for a specific quiz game I've made for a leaderboard. How would I do this in js? The quiz game would be for a corporate workshop that I am eventually going to be running and I'm just trying to have a bit of fun at work by coding this. I've got a base of the game and quiz live at this link, but yeah. If this is possible it would be great. I would have to see the results of people who did the quiz whilst on the workshop in order to adjudicate, so yeah. How could I do this?

Hi! Seems like a pretty cool idea. You can achieve this a couple ways. You can store the data locally, or have it save to a database and retrieve it from there. If you were to store locally, here is an example:

Save and retrieve quiz results:

function saveResultToLocal(userName, score) {
    const results = JSON.parse(localStorage.getItem('quizResults')) || [];
    
    results.push({
        name: userName,
        score: score,
        timestamp: new Date().toISOString(),
    });

    // Sort by score (descending order)
    results.sort((a, b) => b.score - a.score);

    localStorage.setItem('quizResults', JSON.stringify(results));
    console.log('Results saved locally:', results);
}

function getLeaderboardFromLocal() {
    return JSON.parse(localStorage.getItem('quizResults')) || [];
}

Example:

Display leaderboard

function displayLeaderboard() {
    const leaderboard = getLeaderboardFromLocal();
    const leaderboardElement = document.getElementById('leaderboard');

    leaderboardElement.innerHTML = ''; // Clear existing content

    leaderboard.forEach((entry, index) => {
        const row = document.createElement('div');
        row.textContent = `${index + 1}. ${entry.name} - ${entry.score}`;
        leaderboardElement.appendChild(row);
    });
}

// Example: Call displayLeaderboard to update the leaderboard
displayLeaderboard();

Then to implement it into the quiz you would just call on each function. Hope this helps you, please let me know if you need any further assistance! Good luck!

 

[Zakwan@MTH]

you can store the code in a server and then use backend code to display a leaderboard quite easily