[WIP] feat: save lesson code state, fixes #13 #86
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Refactor `clearCache` and `onCodeChange` functions to ensure that when the user requests to clear the cache, the `this.cachedCode` is set to `false`, `this.code` is set to the default for the lesson (`this.$attrs.code`), and the content of the editor box is set to display the new code (`this.editor.setValue(this.code)`). - Functinos now check whether the code is equal to the default code because otherwise when you reset to the default code, it sees it as a code change and stores the default as cached, thereby making the label appear that says you're looking at cached code when it's not true. - With the new refactoring, the system also catches when you delete your typed code and get yourself back to the default by yourself. - Adjusted the message displayed so it makes sense for the live updates. - Adjusted message formatting so it displays in green to make it stick out from the rest of the instructional text.
|
@mikeal This isn't ready to merge, but could you take a look at the current state after my commits? It's totally functional, but I had to manually update the |
|
Dropping a couple of links here for myself on how to get Vue to "watch" localStorage, since it's not working properly yet.
|
- Add `lessonKey` property to match the route path - When code submitted is correct, create a localStorage entry with the lessonKey as its key - Add `lessonPassed` property that tracks whether that localStorage entry is present (it sets itself correctly on first load but can't watch for localStorage changes automatically, so its value is also updated when the code is submitted, which affects the v-if success messages - TODO: Display completed status from the homepage in list of lessons (with a checkmark or something similar) - TODO: Currently once you've passed the lesson it stays passed, and you have to manually delete the localStorage entry from the command line and refresh the page to go back. Offer the user an option to reset to incomplete status (`delete localStorage[this.lessonKey]`) - TODO: Currently if you return to a completed lesson the status of your code may or may not match the right answer you used to pass. Decide how we want the user flow to work. If you change the code away from the correct answer should you no longer have passed? If you load correct cached code should the submit button instead be the next lesson button?
- When deciding whether code has been updated and should be cached, factor in the possibility that the author of the lesson did not include customized code so `self.$attrs.code` may not exist and the starting point may have been `defaultCode`
- Change class `clearCache` to `textLink` for reuse - Create a clickable text span that runs a new `clearPassed` function that deletes `localStorage[lessonKey]` and turns the value of `lessonPassed` to `false`
- In `ExcerciseLink.vue`, add a `lessonPassed` method that takes a route path (available in this component as `to`) and returns true if `localStorage[to]` exists, which means the lesson has passed. - This value is used when printing the list of workshops to add a tropy emoji by lessons that have been completed - TODO: Improve formatting and consider whether there should be a different symbol for lessons not yet completed
- Reformat exercise list to put emoji at left with even spacing
- Change `lessonKey` to prefix the path with `passed` and update relevant code - Create a `checkAllPassed` function in Home.vue that loops through keys in localStorage to see if any start with `passed`. If so, a 'someLessonPassed' property is set to true and a welcome back message is displayed, else a welcome message is displayed
- Add new icons for lesson status: not-started, in-progress, completed - Apply `completed` icon when the lessonPassed is true and `not-started` otherwise - TODO: Figure out the logic needed to judge whether a lesson has been started and not completed and apply the `in-progress` icon
- Replace floppy disk emoji with in progress icon - Replace trophy emoji with completed emoji - Update formatting to force vertical alignment of icons with adjacent text
- Address syntax errors spotted by linter
- Change `cacheKey` to be the route path prefixed by 'cached', so that it will be easier to spot from the homepage whether lessons are in progress - Refactor code so that it's possible to tell (currently in console logs) whether the user has arrived at an unstarted lesson for the first time, is in the process of editing it, or has just reloaded a cached lesson. This will allow future tailoring of the message about cached state
- Add `lessonCached` method that can determine whether there's cached code in localStorage for the relevant item. - All three potential states (not started, in progress, completed) can now be accurately displayed in the lesson list on the homepage
Closed
- Remove welcome / welcome back banner - May use the "someLessonPassed" property for other indicators or messages down the road
- Add `checkFirstVisit` which runs when the homepage mounts to determine whether any code has been cached or lessons passed. If not, the property `firstVisit` is true. - This can be used down the road to customize features for new versus returning users of workshops.
- In `Lesson.vue`, adjust conditionals for button text so that the "Submit" button will not show if the user previously passed the lesson. Instead the "Next" or "More Workshops" button will display as appropriate. - Note that if you clear your cached code but leave the lesson marked as passed, the button will still keep the more complete status.
- In the message that tells you your code is being saved, use the word "saved" instead of "cached."
- Remove topics label from homepage
- Import updates made to change the way CID links work, including NPM packages used - Import changes to how Travis works, compiling from `code` branch
- When user chooses to reset code, run `clearPassed` to mark lesson incomplete - On mount (first or return visit to lesson page), if there is cached code and the lesson is marked as passed, run `run` to evaluate the code currently in the editor so that output.test will exist and the right success message will be displayed - Remove the [checkmark] Lesson passed! message since the success message generated by `output.test.success` already conveys the same meaning - The above change also removes the manual option to mark the lesson incomplete, since we assume the user won't have a reason to do that unless they also want to reset the code, which is an option still provided - Tweak some `v-if` statements to ensure the right items display at the right times (button text, success/failure message, etc.)
- Remove lesson title from exercise box because it duplicates what's at top of lesson page - Remove word exercise (no need for user to learn a new category of workshop component) - Replace with "Try It!" so it's clear it's something for them to work on - Put the icon for not started / in progress / complete next to try it
- Underline text link for "reset code" - Remove "in progress" from next to message about code being cached because it's now duplicated above
- Add a "cachedStateMsg" property that can be set to distinguish between the message displayed when a user returns to a page with cached code on it versus the one they see as they keep editing - Move message about cached state to header of exercise box - Right align "Reset Code" above text box
|
@mikeal I thing we've hit MVP+ on this update. There are some design tweaks I'd like to make still, but I'd love to merge this now so I can share the functionality in my video update. Do you have time to take a quick look and give it a thumbs up? |
mikeal
commented
Dec 6, 2018
- Simplify conditional formatting for displaying success messaage after `run` function
mikeal
commented
Dec 6, 2018
mikeal
commented
Dec 6, 2018
- Remove unneeded comments and console logs - Add some markers for potential tracking of user behavior
|
Screenshots of results:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.