Add back reverted quizzes: run-a-node, scaling, solo staking #11960

wackerow · 2024-01-18T00:58:39Z

Description

Three quizzes were previously added, which surfaced some bugs requiring them to be reverted:

This PR re-adds the above quizzes now that the underlying bugs have been fixed.

Small note, renamed the run-a-node keys to use l instead of i to prevent a future conflict with #11884

Preview links

netlify · 2024-01-18T00:58:44Z

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	`0813e43`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65b18b9ddfa16400086e7028
😎 Deploy Preview	https://deploy-preview-11960--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pettinarip

The code looks good. Marking this as blocked after testing.

While this does not crash as it did before (#10828), it does not update the stats correctly.

======
How to reproduce error:

Go to /quizzes
Open the devtools and manually set the following user stats in localstorage (tab Application):

This will simulate a user that has already used the quizzes.

key: quizzes-stats
value: {"score":3,"average":[60],"completed":"{\"what-is-ethereum\":[false,0],\"what-is-ether\":[false,0],\"web3\":[false,0],\"wallets\":[false,0],\"security\":[false,0],\"nfts\":[false,3],\"layer-2\":[false,0],\"merge\":[false,0]}"}

Reload the page
Make the "Run a node" quiz
After you finish the quiz, notice that the stats are not updated

cc @TylerAPfledderer pinging you in case you have any idea of what might be happening

initialize "completed" to empty object, and add score fallback if not yet taken

wackerow · 2024-01-19T21:50:56Z

@pettinarip I was able to get this working by setting a fallback value when setting lastScore inside useQuizWidget. Also changed the initial completed object to just an empty object {}. With this, I'm having success locally with this updating any existing data from local storage as new quizzes are taken.

Of note, I did have issues with the exact string you pasted for testing, as it contains escaped characters. Did you copy this directly from your ls? When I go to https://ethereum.org/quizzes with a cleared locale storage, I do not get this type of string on my end (it populates without the escapes):

{"score":5,"average":[100],"completed":{"what-is-ethereum":[true,5],"what-is-ether":[false,0],"web3":[false,0],"wallets":[false,0],"security":[false,0],"nfts":[false,0],"layer-2":[false,0],"merge":[false,0]}}

If I go to https://ethereum.org/quizzes, and paste in the locale storage directly from above, I get this:

Notice 169/8 completed... if I clear this and let it do its thing, this does not happen. Thus, I don't think we need to worry about it, just noting... maybe you can confirm on your end as well.

wackerow · 2024-01-19T21:52:24Z

Separately, while debugging this I ended up improving the type-safety on all of these Quiz components while trying to figure out what was going on... in the end, it was not necessary for this fix, but since the work was done I went ahead and posted this in a separate PR, #11992

TylerAPfledderer · 2024-01-22T14:31:13Z

@wackerow @pettinarip I'm seeing a completely different issue with the local storage.

If I clear my local storage, and do a quiz in the quiz hub through this PR's preview deploy, I see this data structure:

This happened if I did the same thing on the Run A Node page.

pettinarip · 2024-01-23T14:56:07Z

@TylerAPfledderer I tested it in FF and it worked fine for me. Does the quiz still work? could it just be a devtool issue? Seems that it detects that completed is an Object but it is displaying it as an array 🤔

pettinarip · 2024-01-23T14:59:54Z

@wackerow nice! tested it again and it worked fine! gj.

Regarding the encoding issue, this is interesting. So, I might have some pretty old quiz data in my localstorage (must be from the first version of the quiz hub logic). I guess we encoded that part differently back then. Now we are not doing that anymore, so I guess its better now!

pettinarip · 2024-01-23T15:08:51Z

src/components/Quiz/useLocalQuizData.ts

- */
-const INITIAL_COMPLETED_QUIZZES: CompletedQuizzes = Object.keys(
-  allQuizzesData
-).reduce((object, key) => ({ ...object, [key]: [false, 0] }), {})


Interesting. We don't need to initialize everything. Simpler, I like it.

src/components/Quiz/useLocalQuizData.ts

pettinarip · 2024-01-23T15:10:37Z

src/components/Quiz/QuizWidget/useQuizWidget.tsx

-      const lastScore = prevStats.completed[quizKey][1]
+      const { completed } = prevStats
+      const hasResultsSaved = !!completed[quizKey]
+      const lastScore = hasResultsSaved ? prevStats.completed[quizKey][1] : 0


pettinarip · 2024-01-23T15:23:08Z

@wackerow @TylerAPfledderer

While testing it again, I was able to reproduce Tyler's bug/issue. So, the encoded data version generates the problem described by Tyler and as a result shows the wrong 169/8 completed stat in the UI mentioned by Paul.

I'm not sure how we could elegantly fix this by supporting both versions: the encoded (old) and the decoded one (new).

Perhaps we would need to add new check to detect if the previous data is encoded and decode it, and then continue with the normal flow.

wackerow · 2024-01-24T21:57:33Z

src/components/Quiz/useLocalQuizData.ts

+  // If the user has an old version of the app, convert the
+  // `completed` value from a string to an object.
+  const [current, setCurrent] = data
+  if (typeof current.completed === "string") {
+    const newCompleted = JSON.parse(current.completed)
+    setCurrent({ ...current, completed: newCompleted })
+  }


@pettinarip @TylerAPfledderer This should fix the issues with the escaped strings for the completed value. This was happening because the completed object was being stringified inside a parent also being stringified.

This simply checks if .completed is of string type, and if it is, parses it and re-assigns as an object to the locale storage value.

// If "current" value looks like this: {"score":3,"average":[60],"completed":"{\"what-is-ethereum\":[false,0],\"what-is-ether\":[false,0],\"web3\":[false,0],\"wallets\":[false,0],\"security\":[false,0],\"nfts\":[false,3],\"layer-2\":[false,0],\"merge\":[false,0]}"} // ...this code block will convert it to this: {"score":3,"average":[60],"completed":{"what-is-ethereum":[false,0],"what-is-ether":[false,0],"web3":[false,0],"wallets":[false,0],"security":[false,0],"nfts":[false,3],"layer-2":[false,0],"merge":[false,0]}}

Just need to double check no edge cases if we have this local storage data and then take a stand-alone quiz, but hopefully this fixes the backward compatibility.

Great! yeah, I guess we will be forced to do this for now.

Looks like it's fixed on my end!

This might also help with the setup with the QuizManager waiting to come online (To have the quiz components isolated and to be supplied separate groups of quiz data) as well as that issue where adding quizzes or quiz questions to the data set compromised existing user stats and throwing id errors.

Does this help with the later?

This fix should take care of compatibility issues when adding new quizzes to the data set.

pettinarip

Awesome! working fine now for me with old and new data structures 💪🏼

TylerAPfledderer · 2024-01-25T18:36:06Z

@wackerow @pettinarip I would like to note here for future design consideration that with the standalone pages, maybe have a way to show the user they already completed the quiz with 100%? Maybe a separate visual that is similar to the summary component?

wackerow · 2024-01-25T18:38:13Z

I would like to note here for future design consideration that with the standalone pages, maybe have a way to show the user they already completed the quiz with 100%? Maybe a separate visual that is similar to the summary component?

Yeah, I like that idea... cc: @nloureiro ^

nloureiro · 2024-01-26T09:21:31Z

I would like to note here for future design consideration that with the standalone pages, maybe have a way to show the user they already completed the quiz with 100%? Maybe a separate visual that is similar to the summary component?

Yeah, I like that idea... cc: @nloureiro ^

Do you understand the idea is to save the user's last interaction on a specific page? Regardless if he refreshes the page.

If I get 100% it would show this
if I have 50% it would show this and push to redo again

is that it?

TylerAPfledderer · 2024-01-26T14:37:55Z

I would like to note here for future design consideration that with the standalone pages, maybe have a way to show the user they already completed the quiz with 100%? Maybe a separate visual that is similar to the summary component?

Yeah, I like that idea... cc: @nloureiro ^

Do you understand the idea is to save the user's last interaction on a specific page? Regardless if he refreshes the page.

If I get 100% it would show this

if I have 50% it would show this and push to redo again

is that it?

That's correct, instead of the quiz always starting over on refresh

wackerow added 3 commits January 17, 2024 16:36

feat: add solo-staking quiz

aa09c70

feat: add scaling quiz

52ed9db

feat: add run-a-node quiz

d048d70

wackerow requested review from corwintines, pettinarip, minimalsm and nhsz as code owners January 18, 2024 00:58

github-actions bot added content 🖋️ This involves copy additions or edits review needed 👀 translation 🌍 This is related to our Translation Program labels Jan 18, 2024

pettinarip requested changes Jan 19, 2024

View reviewed changes

fix: handling saved results in local storage

0fc257c

initialize "completed" to empty object, and add score fallback if not yet taken

wackerow requested a review from pettinarip January 19, 2024 21:52

pettinarip reviewed Jan 23, 2024

View reviewed changes

fix: add backwards compatibility for string values

8546c0b

wackerow commented Jan 24, 2024

View reviewed changes

refactor: rm intermediate variable

0813e43

pettinarip approved these changes Jan 25, 2024

View reviewed changes

pettinarip merged commit 35ebc05 into dev Jan 29, 2024
9 of 10 checks passed

pettinarip deleted the quizzes branch January 29, 2024 12:09

This was referenced Jan 31, 2024

Release candidate v8.0.2 #12074

Merged

Deploy v8.0.2 #12079

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add back reverted quizzes: run-a-node, scaling, solo staking #11960

Add back reverted quizzes: run-a-node, scaling, solo staking #11960

wackerow commented Jan 18, 2024 •

edited

netlify bot commented Jan 18, 2024 •

edited

pettinarip left a comment

wackerow commented Jan 19, 2024 •

edited

wackerow commented Jan 19, 2024

TylerAPfledderer commented Jan 22, 2024

pettinarip commented Jan 23, 2024

pettinarip commented Jan 23, 2024

pettinarip Jan 23, 2024

pettinarip Jan 23, 2024

pettinarip commented Jan 23, 2024

wackerow Jan 24, 2024

pettinarip Jan 25, 2024

TylerAPfledderer Jan 25, 2024

TylerAPfledderer Jan 25, 2024

wackerow Jan 25, 2024

pettinarip left a comment

TylerAPfledderer commented Jan 25, 2024

wackerow commented Jan 25, 2024

nloureiro commented Jan 26, 2024

TylerAPfledderer commented Jan 26, 2024

Add back reverted quizzes: run-a-node, scaling, solo staking #11960

Add back reverted quizzes: run-a-node, scaling, solo staking #11960

Conversation

wackerow commented Jan 18, 2024 • edited

Description

Preview links

netlify bot commented Jan 18, 2024 • edited

✅ Deploy Preview for ethereumorg ready!

pettinarip left a comment

Choose a reason for hiding this comment

wackerow commented Jan 19, 2024 • edited

wackerow commented Jan 19, 2024

TylerAPfledderer commented Jan 22, 2024

pettinarip commented Jan 23, 2024

pettinarip commented Jan 23, 2024

pettinarip Jan 23, 2024

Choose a reason for hiding this comment

pettinarip Jan 23, 2024

Choose a reason for hiding this comment

pettinarip commented Jan 23, 2024

wackerow Jan 24, 2024

Choose a reason for hiding this comment

pettinarip Jan 25, 2024

Choose a reason for hiding this comment

TylerAPfledderer Jan 25, 2024

Choose a reason for hiding this comment

TylerAPfledderer Jan 25, 2024

Choose a reason for hiding this comment

wackerow Jan 25, 2024

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

TylerAPfledderer commented Jan 25, 2024

wackerow commented Jan 25, 2024

nloureiro commented Jan 26, 2024

TylerAPfledderer commented Jan 26, 2024

wackerow commented Jan 18, 2024 •

edited

netlify bot commented Jan 18, 2024 •

edited

wackerow commented Jan 19, 2024 •

edited