idea of a feature: mark a lesson as "studied"

[ZYinMD]

Since you already sell EPUBs, I'd like to propose a paid feature.

Background: Because this book is so good, I really want to read it from start to finish, and I believe many people feel the same. However in reality, that never happens, because I can never find such a big chunk of time. What typically happens is when I need to learn something, I come to read on that specific thing.

Proposal: As a signed-in user, I wish to be able to mark a lesson as "studied" or "have read", which serves two purposes: 1. it's a motivation for me to read all the lessons and "check them all off" 2. help me organize which lessons have been read, especially when I jump to different topics without following any orders.

It could be implemented in multiple ways, for example:

• add a button for user to "mark this lesson as read"
• mark a lesson as read when user clicks "next lesson"
• mark a lesson as read when user's browser tab has focused on this tab for more than x minutes

These behaviors could also be configurable as user preference.

Depending on the implementation, a lesson could even be read multiple times, for example, a ✔ is shown on the page to indicate it's been read, and ✔✔✔ shows if it's been read for 3 times. Clicking or hovering the symbol could show the date it happened, and the duration of the session, etc.

[ZYinMD]

As for the payment modal, you could do something like this: step 1. provide the button "mark this lesson as studied" 2. if a user clicks it, prompt to sign in 3. if the user actually uses this feature, after 20 lessons have been marked, prompt to pay

[iliakan]

This feature should be free if implemented.

Also, we probably can implement it without a need to sign in.

But is it needed?

[ZYinMD]

Haha, of course it's all up to you. I agree not everybody needs it, but it's also possible that people never thought about it, so they don't know they need it, until one day you give it to them, and they be like "oh this is so nice".

Again it's all up to what you think, but here are several of my random thoughts:

• 1 year ago I came here and read regex, half a year ago I came and read polling, this week I came and read IndexedDB. The pattern is "I need to learn something so I come here to read". However, if this feature is implemented, I'll probably change my pattern to "read everything, feel proud every time I check off a chapter, call myself a JS master when I finish the book".
• yes, a front-end only implementation without sign-in is much easier to do, the only disadvantage is it can't sync the reading status between different devices.
• when you play a video game, there are often "achievements" you can get. Many people don't care, but some people are crazy about it. I guess "marking every lesson as read" is sort of an achievement. You could also design other achievements, like "read 3 different topics", "finished part 1", etc.
• To minimize the impact for those who don't need this feature, you could make it fully automatic, no button to click, no preference to set, simply display badges.
• it's actually already sort of implemented on the "table of contents" page, because links I have visited are shown as purple. I think you could improve it a little bit by 1. persist it in IndexedDB, so it's not subject to clear browsing history 2. on table of contents, instead of purple color, show a badge or a checkmark, or at least tweak the purple color to make it stand out more, so people are more likely to notice it's a feature 3. on hover over, explain what it means
• Of course it could be free, I thought it would be paid because if you implemented it, if there are x% people who actually use this feature, those x% will never buy epub/pdf. It all depends on your goal of this project.
• there's another pattern: if I read about decorators today for fun without needing to use it, I'll probably forget how to use it tomorrow. However, I'll remember "javascript.info has a section about decorators". When next time I do need to use decorators, instead of googling "decorators javascript" I'll simply come back here.

[iliakan]

Let's hear what others say =)

[Li-YangZhong]

Links visited will be shown in different colors compared with colors shown for unvisited links by most mordern browers automatically. Clicking the 'tutorial map' icon on each page's top left corner will give you an overview as to which pages have been visited(read) or unvisited. This serves as a bookmark telling users what lessons are learned and what lessons haven't been checked out yet. I found this feature very usefuel.

[orionrush]

Duplicate of https://github.com/javascript-tutorial/en.javascript.info/issues/384

[dagolinuxoid]

It sounds artificial to me. Keep in mind that JS is a fast-paced evolving language so most of the chapters in the tutorial are live and change due to updates.

[remusbackup]

Yes its really a good idea. The clicks on link of chapter name tell me to keep going on, like the colour change on those links. @dagolinuxoid is also right and that it is changing at times. Can we have another tag for seeing those updates? Like a pill or something that a major update has been there on some chapter, that we should get a look into it. It will be good.

[duhbhavesh]

I've recently started javascript.info and It's awesome!

It's a really good idea to have ✔ on the lessons we have completed. or If the visited lesson color would be grayed out or some other color it would be really great! I'm having a hard time differentiating the visited link and the lesson that need to be started. (It's just me probably)

[Colt0804]

I don't think that signin option will be needed for adding any feature like "studied" or "have read" for the users. But It's really a good idea to have any options like that.

[orionrush]

I don't think that signin option will be needed for adding any feature like "studied" or "have read" for the users. But It's really a good idea to have any options like that.

How would you see this working?

True, but the 'completed/visited' data could be stored in the browser.localstorage, but in this case, it would mean that after a hard refresh it would disappear. And of course, this user state wouldn't be portable between browsers or devices. Without some sort of access to a database and backend to store user state, (and therefore requiring user validation via a login), I dont see how this could work.

Firestore might be a good fit for auth and a data store, for this kind of project with a js only module (perhaps on top of vuejs). This way they wouldn't need further tooling of a back end. Firestore might not be the most economical though depending on the traffic the site gets.

[Colt0804]

@orionrush Highly agree with you that firestore might not be economical for such kind of projects if having huge traffic but we can store users specific data even after refreshing the page.

The easiest way to reload the current page without losing data, can be achieved by using WebStorage where we have -persistent storage (localStorage) or Storage.setItem() or Window.localstorage.setitem() is used both to create new data items, and (if the data item already exists) update existing values. Yeah this wouldn't be portable enough between devices but might be useful for users using the same browser.

[realshoaib]

Well this feature is kinda available already as if you've signup on the site then the color of the article you'd visited will be changed!

[petzi53]

I want to support the feature request.

Well this feature is kinda available already as if you've signup on the site then the color of the article you'd visited will be changed!

@realshoaib What about using different browsers on different devices? You wouldn't know which lesson you already visited.

Keep in mind that JS is a fast-paced evolving language so most of the chapters in the tutorial are live and change due to updates.

@dagolinuxoid You are right. But maybe another message like 'content revised' could give learners hints that another reading would be worthwhile?.

[realshoaib]

Well @petzi53 it's synced with your account you logged into instead of your browser cache or something else!

[Akash2002]

Yep I agree. This feature already kind of exists with the link coloring and the browser cache that is linked to the account logged in. I log into all devices with that same account so I never found it to be an issue. Furthermore, I think it would be further complicating what must be a simple and easy to access website with unnecessary authentication systems that users must abide to.

[ZYinMD]

@Akash2002 Do you mean chrome account or javascript.info account?

[Akash2002]

It's my chrome account @ZYinMD . I am currently not logged into javascript.info but I can still see the previously visited link colors. So it is synced browser cache.

[T1mL3arn]

A lot of online books/tutorials (freecodecamp, the Odin Project) already have a feature that allows tracking your progress. javascript.info should have it too.

[ShahriarKh]

Hundreds of +1 for this feature!

[ShahriarKh]

We can continue this in "Discussions".