freeCodeCamp/Developer_Quiz_Site

[EPIC] - Implement LocalStorage for Quiz Progress and previous high scores

Closed this issue · 15 comments

What feature would you like to see?

I would like to propose a feature that will enhance user experience by utilizing localStorage to save quiz progress and their previous high scores.

Feature Overview:

Quiz Progress Saving:

  • Storing the user's current progress in a quiz, including the current question and answers selected.
  • Ensure that users can leave a quiz and return later to continue from where they left off (same session)

Implementation Details:

  • localStorage API:

    • By using the localStorage API to save and retrieve quiz data on the client side.
    • Implementing data validation and expiration mechanisms to manage storage efficiently.
  • Compatibility:

    • Ensures that the implementation is compatible with major browsers (Chrome, Firefox, Safari, Edge).
    • Handles edge cases where localStorage is unavailable or disabled.

Benefits:

  • Enhances user experience by allowing them to pick up where they left off.

Tasks:

  1. Define the structure for storing quiz progress and user preferences.

    • Determine the data that needs to be stored for quiz progress (e.g., current question, selected answers, previous scores).
    • Define the structure for storing the progress data.
    • Choose appropriate keys for storing data in localStorage (e.g., quizProgress).
    • Decide on data types (e.g., JSON objects) for the stored information to ensure easy retrieval and manipulation.
  2. Implement methods for saving and retrieving data using localStorage.

    • Write a function to save quiz progress to localStorage.
    • Write a function to retrieve and restore quiz progress from localStorage when a user returns.
    • Handle scenarios where localStorage might be unavailable (e.g., private browsing mode).
    • Add data validation and checks to ensure that only valid data is saved and retrieved.
  3. Test across different browsers to ensure consistency.

    • Test the feature on major browsers (Chrome, Firefox, Safari, Edge) to ensure localStorage works consistently.
    • Verify that the quiz progress are correctly saved and retrieved in each browser (same session).
    • Check for any issues related to storage limits or performance.
    • Handle potential security concerns, such as data persistence and privacy.
  4. Document the feature and provide instructions for developers and users.

    • Write documentation for the new feature, explaining how it works and how developers can integrate it.
    • Include code examples for saving and retrieving data using localStorage.
    • Provide instructions for users on how to utilize the feature.
    • Update any existing documentation to reflect the new feature.
    • Add comments in the code to clarify the purpose of key functions and structures.

Please let me know if there are any additional details or considerations that should be included. I’m looking forward to contributing to this project!

Tasks

Preview Give feedback
  1. Already Assigned
  2. Already Assigned
  3. Already Assigned
  4. Already Assigned
  5. Already Assigned
  6. Already Assigned

Saving user settings, such as selected themes, preferred programming languages, and any other customizable options.

This is outside of the scope and we are not going to be tracking all of this information.
So we are not going to be implementing this functionality.

As mentioned in the original discussion, the scope of this feature was for users to track their original progress in the game and keep track of their previous scores.
#256

Please update your issue to remove all functionality dealing with this

Provides a more personalized experience by remembering user settings and preferences.

Hey,
Okay sure,
I updated the issue just now.

Please do check and let me know

I have cleaned up the issue to remove any remaining mentions of the user preferences.

So now this is properly scoped and this will be considered the EPIC.

Moving forward, you will need to break up the work into small issues and track them in this epic.
When you create these smaller issues, you will need to create design mockups for what it will look like when a user revisits the site and wants to resume where they left off so we are on the same page for what this is going to look like.

Then you can start by creating PR's for these issues and getting them reviewed.

Moving forward, you will need to break up the work into small issues and track them in this epic. When you create these smaller issues, you will need to create design mockups for what it will look like when a user revisits the site and wants to resume where they left off so we are on the same page for what this is going to look like.

So, Do I have to use a different and well-defined task list, or does the one I updated earlier work?

If you want to copy over parts of the task list from earlier into these smaller issues, that is fine

If you want to copy over parts of the task list from earlier into these smaller issues, that is fine

Alright,
I will just start working on the same task list as I already mentioned up above.
Thank you!

I am closing all of these issues due to inactivity

@jdwilkin4 I want to work on it , can you assign it to me please

I have assigned you the issue @Epik-Whale463

You will need to spend some time, orienting yourself with the full context of the feature and understand what the scope is for this feature.

You will also need to review the task list issues and what needs to be done there and the PR's you will need to create.

@Epik-Whale463
You will also need to comment on each of the issues related to this feature so you can be assigned to you.
Due to GitHub's access control, I can't assign you to individual issues unless you comment on the issues

@Epik-Whale463

Are you still interested in working on this issue?

If so, you will need to comment on the related issues so you can be assigned.
Otherwise, we will close this issue for now

Yes I am interested in this issue , but I'm kind of confused where to comment?

If im not mistaken, i have commented on all the issues related to the localstorage implementation

It looks like you commented on a couple of the related issues.
You can find the complete list on the issue here

Image