Forward and back buttons for level pages

Hey there.

As I’m approaching the end of a level, I often like to have a quick glance at the next upcoming levels via the level page. Especially on mobile I’d prefer to be able to quickly browse through these pages forward and back – essentially just two more buttons that lead to the previous and next level.

As for the position, it seems like there is some empty space on the right side in the header with the level number both on mobile and desktop.

In terms of usability, this would be one tap rather than three you now have to do via the hamburger menu on mobile and two on desktop. (Keyboard shortcuts to switch pages with “A” and “D” and left or right arrows would be really nice on desktop, though!)

1 Like

Would you be ok with a temporary userscript?

Definitely, if you’re up for cooking one! That would be a reason to finally install Userscripts on iOS for me.

I second that it’s a little awkward to navigate levels- I tend to not wanikani on mobile, but even on laptop, having to hit the back button each time to navigate to the level I want to look at is a little tedious.

I wonder if those level buttons could be moved to the side of the page and float along with the user navigation, so they’re always accessible, so this

image

would be vertical on the side of the page and always accessible. @eagleflo can correct me if I’m wrong, but I believe this would address what his suggested solution is with the previous and next buttons but would also grant the ability to select any level at any time, not just the one after or before what you’re currently viewing.

This is a bit different, the level page only shows one level at a time, unlike the radical-kanji-vocab pages, that show that level category

2 Likes

Quickly threw this together.

Adds this:


And allows either A-D or left and right arrows to navigate between pages

1 Like

Yep, you’re right, bad reading comprehension on my part.

I’ve tried out the WK Level Arrows script and it’s working like a charm, thanks.

1 Like

Thank you! This is already a great improvement on desktop. I’ll also set it up on mobile later to see if it helps.

Edit: Although it now applies also on review page, despite the @match setting. Is there a way to make it only match on /level/? :sweat_smile: I suspect the added event listeners stay in the DOM after navigating away from a /level/ page.

Ah, damn, indeed, I did mess that up. I’ll fix it up in a bit, just gotta get to work and completely concentrate on work, not at all get distracted by fixing a script

1 Like

It should now only look for level pages.

Btw, not sure, how well it will work on a mobile page, since those don’t usually have a lot of space left to the sides. If you install it on a phone, do show a picture. I’ll try to at least make it work somewhat.

Unfortunately the issue is still there. The event listener for keyboard events should not fire on other pages than /level (and arguably cleaned up when navigating elsewhere) – once they are registered, they’ll follow page changes and keep reacting to input (when reviewing, for instance).

That shouldn’t be an issue. Those only do anything if there are left and right arrows present, which shouldn’t be the case on review pages anymore. Make sure you actually updated the script to 0.2.

Worst case, I’ll have reviews again in about 2 hours and a bit, I can test more thoroughly then.

I believe DevTools has a button to switch screen sizes. Anyway,

Despite overlapping, I think it works pretty well.

Indeed, I did try it and it looked absolutely s**t. My main concern was a different screen size. Not sure exactly which iphone or whatever they have.
Maybe a bar at the bottom that would cover some of the screen real estate would work in terms of design, but this is definitely a losing battle

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.