Reviews 2.0, and a whole lot more! [Beta]

With the JLPT behind us, and the new-year having just begun, it is the perfect time to unveil the new ‘Reviews 2.0’ feature! New Year, New You, New Bunpro!

This feature update includes much more than just a revamp to the Reviews system! Check it out:


How to Access

  1. Go to your settings.

  2. If you haven’t already, Opt In under “Bunpro Beta” settings.

  3. Enable “Reviews 2.0” Beta.

(You can still access the old features at any time by using the buttons on the dashboard!)

howtoaccessbeta


Purpose

‘Reviews 1.0’ has been around since I signed up for Bunpro circa 2018. It is battle-hardened, and people know and love it.

However, with age, it has also become very difficult to update and improve. And even to this day, its still haunted by bugs that have evaded the team time and time again. It was overdue for a facelift!

Because Reviews is perhaps the most accessed feature of Bunpro, it covers a lot of functionality and is the single part of the site you interact with every day. Despite doing everything it needs to do, it never did it beautifully, or excelled in any one particular area.

The new Review system is faster, simpler, and more elegant than Reviews 1.0 was in almost every way.


Update Overview

Reviews Page

reviewing

Reviews 2.0 was coded and designed from scratch. With a fresh start, we have implemented new and existing features!

  • Major facelift and new layout!
  • Improved “Focus Mode”
  • A new keyboard shortcut tooltip for all those keyboard power users
  • Access Grammar Search inmediatly with the Magnifying Glass icon! (this will be replaced by an in-reviews quick look for grammar in the future!)

Reader

reviews-2-beta-reader

Previously, clicking on text with a Grammar/Vocab popout would simultaneously open the popout and toggle the furigana on/off. To address this, we’ve created a new furigana/grammar point pop-out tooltip (‘Reader’ is the working name – any ideas are welcome!)

  • Allows for toggling furigana and opening Grammar Points / Vocab separately
  • Displays all the possible readings for the selected word, and remembers your choice of whether or not you’d like to keep displaying that reading

Summary Page

  • Access any time to view the details for your last session
    • You can also view all session data from the last 24 hours
  • The new summary page now provides the details for the question you got wrong, by displaying the full sentence and providing a link to the relevant grammar point!
  • Sort correct / incorrect answers using the selector on the right

New Grammar / Vocab pages

new design showcase

We’re on our way to a much more faster and modern look and feel for Bunpro. While well-known painpoints like the notes being too large will be addressed in a future update, we want to test this newer and more modern design for Bunpro.

  • Not too much is new here in terms of functionality, but much like the theme for this update, interactions should be faster, and you should get much more feedback on if your actions have been successful or not
  • Going between Grammar Points is much faster now

Caveats / Known Bugs

Please keep in mind this is a Beta, and we’re doing our best to provide the service you deserve. Here is what we aim to fix during the Beta period:

General issues:

  • VOCAB IS NOT REVIEWABLE
    • Perhaps the biggest caveat with this update
    • We have a big update coming for Vocab, and until this is done, you will not be able to Review vocab through the /beta/ URL!
  • Audio is not scrubbable through the player (we’re working on it)

Routing issues:

  • Back button to go from a one of the new pages to one of the old ones will not work.
    • The URL will change in your browser, but the page won’t refresh. Manually refresh the page to re-load the URL
    • This is unfortunately a bi-product of the cutover. As we switch more and more pages to the new system, this bug will be less and less noticeable
  • Going between pages on the new system should feel much faster
    • You will however, experience the same slow load when transitioning between old pages and new ones. Basically, the more pages we cover, the faster the web-app will feel
    • Currently covered upgraded pages include the following:
      • /beta/reviews
      • /beta/learn
      • /beta/summary
      • /beta/grammar_points/*id*
      • /beta/vocabs/*id*
    • We will be moving as quickly as possible to get more pages moved over to the new system
BTS updates & tech details for devs

Along with the noticeable features mentioned above, here are some more stuff we’ve implemented some other QoL/BTS changes while we were at it:

  • SEO Improvements across the board
    • New swanky OG image – share us and check it out!
    • Dynamic OG images coming soon
  • A range of accessibility improvements over the original site

Our stack:

  • React /w NextJS
  • Typescript
  • Tailwind for styling
  • Vitest for Unit Tests
  • Hosting /w Vercel
  • Legacy to new site cutover achieved with NextJS dynamic rewrite

Feedback

We have been working hard at this new version of the site, but like anything, things can always be improved.

As you use these new features, we would love to hear anything and everything about your experience. We intend to keep building and releasing updates to keep things moving in the right direction. So, as always, your feedback (what you like and don’t like, as well as features you would like to see) would be much appreciated! :bowing_man:

Feel free to DM me (veritas_nz) directly with any feedback, or reply directly in this thread. We want to make this a collaborative process as much as possible, so we will periodically ask for specific feedback on features and changes.


Tentative Additions

We want to make this a collaborate process with our community by sharing the ideas or upcoming changes we’d like to tackle next, and to get feedback at an earlier stage to be able to change course if they aren’t something that bring value.

#1 - Show Grammar Info

In the current, older version, you’re able to see the sentence as well as the top of the grammar point explanation right below the Study Question since it’s not a full screen design.

The new beta is, which makes that method of displaying information less-than-ideal. We’ve discussed a few ideas and alternatives to this, and came up with what we like to call the Splitscreen Details. Check it out!

splitscreen

Strengths:

  • Allows you to see content side by side to the sentence and what you answered
  • No additional scrolling needed
  • Looks cool

Weaknesses:

  • Not possible for mobile (though you do get a drawer with less scroll too)
  • Long example sentences can get a bit crunched up
  • Can feel like a lot is going on

Questions for the Community:

  • Do you think this new display method achieves the goal of getting information about your study subject?
  • What key differences do you identify between this method and the previous one? Which one do you prefer, and why?
  • Would you like to have this feature?
  • What do you think is the best way for this to trigger?

Because reviews are a very important part of Bunpro and we create a system that is intuitive, simple and effective. Remember, there are no bad answers and your feedback will only help us improve.

#2 - Reviews Backdrop Options

As shown in the screenshots, we have added a lot of color to the reviews.

Questions for the Community:

  • What are your thoughts on the overall readability of the new design?
  • Do you find it easy to focus during your reviews with the current gradient background? Please provide details.
  • What do you think could be an alternative?

We wanted to err on the side of caution with this and just triple-check that nothing is too hard to read now.

#3 - Start Quiz Placement

In this new iteration of the Learn page, we utilize the drawer which by default pops out from the left. Considering the next arrow is on the right hand side, this can result in needing to move your mouse across the page to access the “Quiz Me” button.

We have mitigated it to some degree by allowing for the [Right Arrow] key followed by [Enter] will start the quiz. Additionally the Quiz Me button is automatically focused when the drawer is entered.

Questions for the Community:

  • Would you rather see the drawer on the right hand side?
  • Would a modal popout be better than the drawer?

As always, thank you for all the support and feedback you provide. You push each and every one of us to work hard to help make your learning experience on Bunpro as great as it can possibly be. Stay tuned for a few more updates! Happy studying! :heart:

EDIT: Patch Notes

Day 1 – 2023-1-6

Switched the method for implementing hotkeys:

  • Alternative keyboards should now work as intended

@Arkeuse @Bang

Updated the “Show Grammar” button & how it interacts with the “Auto-Expand Info” setting:

  • When auto show grammar is on:
    • Load the grammar info below (no scroll)
    • Have the f hotkey trigger a full scroll down
  • When auto show grammar is off:
    • Only load grammar on ‘F’ hotkey / ‘Show’ button press
    • After it loads, trigger a full scroll down

@Fabniam @bunnypro @Melanthe @chicharron

For our Firefox users – we’re working on a fix for the BG gradient banding
For our tablet users – we’re working on quality-of-life features for ya’ll too!

As always, thanks for the feedback ya’ll! Stay tuned~

Day 2 – 2023-1-9

Thanks all for your feedback! Some more Day 2 bug fixes are here.

The fixes:


Fixed XP not displaying correctly in Summary

It would take a while for the changed XP to display correctly in the Summary page header.
Thanks those who noticed it and pointed it out!

@Marcus @Megumin @Kioshen


Some answers not being answerable / endless suggestion loop

For those getting into endless loops with hints – this should be fixed now – let me know ASAP if it is not, and let me know which question you found the issue on and want you attempted to answer with.

@eclipse77x


Pressing the [ I ] hotkey now scrolls the page up

After scrolling the page down to interact with Grammar Points, pressing the “I” hotkey will now focus the input and scroll to the top. I was a bit late to the party with what should have been an obvious addition.

For those curious, we purposely shifted the ‘Enter’ key so that it only submitted the inputted text when the text-box was selected/focused.
This was an accessibility decision, and allows keyboard/screen-reader users to tab between buttons on the page and interact with them using the [ Enter ] key.
This new functionality might take some getting used to.
This also explains why we added the new [ I ] hotkey to re-focus the input.

@TobyOne @qazrt


Custom Study Question fixes

  • “Show Grammar Info” functionality now added for Custom Study Questions
    • This should’ve been in there from the start.
  • Bug entering Custom Study Questions
    • This should now be fixed! Let me know if you have any more issues

Cheers custom-question power-user @Marcus for the heads up


Other misc fixes:

  • Fixed a typo in the Structure Legend – cheers @max99x for finding this!
  • Added the strike-through text effect to writeups/structure details – cheers @Travioli for finding this!

Next fixes:

  • Increase profile image size in Summary
  • Work out what to do for wiiiiiiide screen users so that the Quiz screen is a bit more compact – discussing this internally so watch this space!

Apart from bug fixes, I’ve also implemented some fade-animations to Quiz to make the experience a bit smoother/nicer.

As an aside – if we have any users that preferred reduced motion on the web, please send me a DM to let me know how we’re doing with that part of accessibility on the site!

As always thanks for the feedback

Day 3 – 2023-1-10

Thanks all for your feedback! Some more Day 3 bug fixes are here.


The fixes:


Fixed more buggy sentences that were causing an infinite-hint loop

  • This should be all of them. If anyone notices any more just let me know

@Mannelito


Greatly decreased fade-in-out transition time between review sentences

@Mannelito


Fixed the form Japanese filter to properly accept Japanese text

  • There was another issue with validation and questions that had Furigana!
  • This is now fixed

@Marcus


Fixed issue where Hints Button wasn’t clickable on mobile

  • This bug was introduced after Reviews 2.0 Beta launch – sorry for the inconvenience :bowing_man:

@Mapletree @Eradin


Made amendments to furigana sizing to stop weird Kanji spacing issues

  • Reduced letter spacing and font-size of furigana rubies

@Sidgr


Thanks again ya’ll for all the feedback!

Day 4 – 2023-1-11

The fixes:


Fix “Grammar Point Info” button not working

  • There was a bug where internally the app got stuck in the loading state for Grammar Point Info. This should now be fixed

@chicharron @joesan13 @Slurpeedrink


Fix Summary stuck in endless loading state if accessing empty Review page

This should now be fixed – if you access the Reviews URL with no reviews, it should now properly show the ‘Last Session’ tab as empty

Nice catch on this bug Purple!

@ThePurpleOrange


Automatic n → ん conversion

  • Automatically convert inputs ending with ‘n’ with ‘ん’

  • E.g. typing in だんだn and hitting enter is the equivalent of entering だんだん in its entirety

@Superpnut


Other notes & stuff

LastPass showing icon in input field

I too am using LastPass (Edge on MacOS), but wasn’t getting this issue.

I renamed the text-input field’s name from user-input to manual-input – maybe the user part was making LastPass think it was a username input field or something? Let me know if this fixes it!

@MaximizedNOVA

Question not displaying until interaction

I’m looking into the issue where the question will not display before interaction – the issue is indeed caused by the fade animations. If I can’t get this fixed soon, I’ll revert back to no animations until I can get it properly sussed.

@Kioshen @bunnypro


Next on the list

  • Yomi-chan bug fixes

  • Store the preferred voice in the audio-player so it remembers the user’s choice across site visits

  • Better tablet support

  • Reviews gradient banding (visual bug) on Firefox

Day 5 – 2023-1-13

Day 5 bug fixes:

The fixes:

  • Add “wide-screen mode” to Reviews
    • Lots of users had feedback about the content spreading out too far on larger screens during the Quiz
    • We have added an option to restrict the width of content during quiz
    • The button is only available past a certain width, and can be toggled on/off
    • Gonna poke all the users that commented about preferring the compact style of the Legacy review page:
  • Remove “Show More” button from Example Sentences
  • Fixed bug where incorrect answers wouldn’t show up in Summary if they weren’t wrapped up
  • Fixed bug where last question sometimes isn’t included in the summary
    • Now the Reviews system will properly wait for the question to be submitted to the database before requesting the submit data
    • This should lead to 100% accurate Summary results
    • @Nirgan @kush

Other notes & stuff

  • Add wrapup icon and quesiton count to the Reviews header
    • Now you can tell when you’re wrapping up, and how many questions are remaining.
  • Temporarily removed Question transition animation
    • Was creating a bug where the screen would remain blank
    • Removed until I can find out what’s causing it
    • @TobyOne @Marcus

Next on the list

  • Yomi-chan investigation & bug fixes
  • Notes re-style
  • Store the preferred voice in the audio-player so it remembers the user’s choice across site visits
  • Better tablet support
  • Reviews gradient banding (visual bug) on Firefox
  • Altering existing input is buggy @andrewkfiedler
  • Hide last question if Quiz is ending (about to go to Summary page)
  • Increase resolution of profile image in Summary page
  • Add SRS progress badges to the bottom of the Grammar Point page
Day 6 – 2023-1-18

Added Features

  • Added Finish Session/End Session hotkey
    • Use the “0” (Zero) key to switch to wrap-up mode if you have unfinished items, or end the session instantly if you have nothing to wrap up
  • Save user’s preferred audio voice (male/female)
  • Redid how Notes looks when a note exists
    • Before
      • notes-before
    • After
      • notes-after

Bug fixes:

  • Fix styling and input issues on tablet
    • Finally got around to fixing the issues around input on tablet
    • @Marcus.W
  • Improve end-of-quiz experience
    • Properly clear question content at end of Quiz
    • Switch to loading spinner while loading the Summary page
  • Submitting a correct answer displays the main correct answer first
    • When you submit a correct answer, it now shows the first/main correct answer
    • This is to match the question audio
    • @TobyOne & others
  • Always display form field description, even if there is an error
    • Previously the description for the input field would dissappear if there was an error
    • The description will now stay there permanently
  • Increase duration of gradient animation during Reviews
  • Fix furigana by removing depcrecated tag
    • Removed tag from furigana rubies
    • Should behave much better with Yomichan now!
    • @Mapletree @Terrylee
  • Properly order Example Sentences (Vocab/Grammar)
    • Orders GrammarPoints by internally decided order
    • Orders Vocab by JLPT level
    • ナイキャ @melisma!
  • Re-introduced fade-in-out animation between questions
    • Let me know if you notice any bugs related to this again
  • Other minor bug fixes and UX improvements

Next on the list

  • Fix bug that is causing Grammar Info to not show / Audio to be delayed
    • This is the big one at large.
    • If anyone has any information that could lead to the solving of this bug, please send me a DM with what happened before the bug occured (no reward)
  • Reviews gradient banding (visual bug) on Firefox
  • Increase resolution of profile image in Summary page
  • Add SRS progress badges to the bottom of the Grammar Point page
Day 7 – 2023-1-26

Fixes & Changes

  • Fixed Spacebar not working in Notes in Reviews
  • Fixed Alt Answer showing second answer if incorrect
  • Show session-ending spinner if exited through shortcut
  • Add check to remove duplicate alternate-answers if DB data is incorrect
  • Bumped the Japanese example sentences in the Writeups to be larger
  • Increased User profile-picture size to properly match the size of the pic on the Summary page
    • Might take a bit of time (a few days) for this to take effect
    • @eclipse77x
  • Added SRS indicator icon to Grammar Synonyms/Antonyms
    • This was previously just text before
  • Summary page now uses the Kanji answer for a question (if one exists)
    • Previously just showed Hiragana
    • Might take a bit of time (a few days) for this to take effect
  • Fixed up the experience when finishing Learn
    • Added custom text to the drawer that pops up if you end the quiz prematurely
    • Fixed the functionality when you close the drawer (not clicking ‘Continue’ or ‘Summary’)
    • @ThePurpleOrange thanks for the feedback!
  • Fixed audio issue where if there is no audio, hitting ‘P’ played the audio from the last question that had audio
    • I think this might be the fix for another issue – the “audio lagging behind by a review”
      • Not guaranteed that this fixes it, so let me know if any of ya’ll still have audio issues
    • @JandroSantiago @TobyOne
Day 8 – 2021-1-28

Layout Overhaul

Optional fixed height & widths

On larger devices, clicking the ‘screen’ icon in the top-left will open up the Display menu. Here you can switch between having a full-screen or fixed-height page layout.

  • Previously, fixed-height mode was forced on users that had smaller screens or touch screens. This led to a bad user experience, especially for users that had physical keyboards attached to tablets
  • We’ve now given you the choice on how you want the screen to display
  • Fixed-height mode now fixes the Quiz screen to be set height (530px high)
  • This also much more closely resembles the old Reviews layout – so hopefully users that are pining for that to be back will also find it satisfactory!

Also in the Display menu, you can also choose to toggle between having a fixed-width too.

  • Note that, for devices where this setting would be irrelevant (sub-1280px devices), this option is not there, and is instead replaced by the ‘Use Fullscreen’ option

Here are all the possible layout combinations on desktop screens:


Fixed width fixed height – Full height fixed width


Fixed height, full width – Full height full width

On mobile, the Hint button now always is available – regardless of if you’ve answered the question or not

Alternate answer carousel is now beneath the question

The alternate-answer carousel has moved places. It used to be above the input, and would take over the post-attempt submenu (where the Undo, Show Info, and See Answer buttons are). This carousel stood out far too much and got in the way. Not good.

Now, it is much smaller and has been moved to where the ‘leading-hint’ gets displayed.

Grammar Info now always displays beneath the quiz

  • We tried displaying the Grammar Info inside of the drawer on mobile, but this was a bit clunky.
  • Now, the Grammar Points display directly beneath the quiz, as they do on desktop.

Updated SRS info

In the top right of the screen lies the SRS info. This has got a juicy update too!

  • Now when you get a question right or wrong, it will change color and number to represent your new level.
  • Also, the icon next to it will tell you what type of question it is – whether it is a custom study review, a Ghost review, or a regular review.

regular-review custom-review

ghost-slain level-up

Anyway, thanks for the patience guys!

@Gunta @TobyOne @chicharron @severian @Kioshen @Marcus @Marcus.W @bunnypro @CursedKitsune


Other Fixes & Changes

  • Hints should now properly reset after entering a correct answer/question change
  • Scrollbar appearing in the alternate-answers carousel
74 Likes

Very cool. Thanks.

8 Likes

Special shoutouts to that one user today who manually entered the beta review URL before we even announced this and made it available for testing.

Slightly freaky to get (great) feedback before we even finished writing this post :rofl: Nonetheless, great work to everyone involved with this update! I feel like a broken record, but you all have helped transform this site so much. Night and day difference from when I first joined here as a user years ago, 2023 is going to be sublime. :orange_heart:

28 Likes

Sounds fun! Thank you for the hard work. I’ll give it a try!

10 Likes

I’ve only used it for a few minutes but I already love it, thank you so much!

8 Likes

Not sure if this thread is only about the reviews feature, but I just tried a lesson that ended with a quiz using the new UI. That felt really smooth and polished, but after answering all the questions correctly it loops back to the first question instead of finishing the lesson. The new grammar points did not get added to my review queue either.

5 Likes

Hi there!

Thanks for the bug report.

Got a few questions to ask, so I’ll send you a DM about this!

5 Likes

Any hint as to when this will drop?

7 Likes

Looks like I started Bunpro at the right time, so many new features being announced lol. Looking forward to seeing the 2023 developments!

7 Likes

Hopefully end of next week. :crossed_fingers:
It is at the top of the list now.

Sorry it has gotten a bit delayed :sweat:

6 Likes

I saw this briefly before the thread went live and posted a response in the General feedback yesterday, but the gradient on the background of the beta reviews does not get dithered in Firefox and leads to some really weird banding. It almost looks like window blinds on my monitor.
Otherwise it looks really pretty!

2 Likes

Looks great!
Really like it, and super looking forwards to Vocab soon, especially if it includes N3 or that will be coming soon :laughing:

I seem to be autoscrolling down to the grammar point every time after submitting an answer - not sure if this is intended. I guess it’s probably because I have grammar points on auto-expand on answer, just to save clicking a button every time before scrolling down to it only in case of need. It looks cool that it autoscrolls, but I prefer having a look through the alternative answers, then just go on to the next review in the majority of cases, but still have the grammar point ready and available to scroll down to just in case of need / for reference.
Incidentally, love the way the alternative answers are set up now so you can see how many alternatives there, and the hints too!

I’ve also noticed the hints which appear when you submit a slightly “off” answer stay on the screen even when submitting a different answer, which might cause some confusion:

Some nonsense put in to demonstrate the point :grinning_face_with_smiling_eyes:

Btw, for “Reader”, a suggestion to call it an “Infopoint” :smiley:

4 Likes

After enabling this beta, the review link in the header goes to the beta but the big review button still opens the “old” review page.

3 Likes

For me too.

1 Like

In Safari on my iPad, this review requires me to scroll do see the whole content.
It is without scroll if I hide the keyboard but then I of course can’t enter any answers.

1 Like

I think that’s intended for now during beta.
It helps those who do vocab reviews still be able to access them.

1 Like

Are the keyboard shortcuts working for you guys? I keep hitting “A” and “Space” out of habit but nothing happens.

Otherwise, the new design is beautiful ! :star_struck:

2 Likes

Thank you for this update!
Really like the UX! Just not a big fan of the background gradient, but I thinks that’s just not my cup of tea. :slight_smile:

One thing though: After I typed in a corect answer and hit enter, the page will jump-scroll to the grammar section. I don’t know if this is a wanted behavior but I wish to deactivate this in the settings if possible and just scroll down if I want or if I press the shortcut.

Keep up the great work!

1 Like

Only getting the old review page. Not the fancy new one :pensive:

2 Likes

The keyboard shortcuts are working for me!

3 Likes