What I propose is to have a option to hide sentence highlights in Reading mode.
Example
In this particular sentence, I read it, thought I understood, then revealed the answer, and realized that I completely missed the point in the sentence, just seeing the unhidden highlight.
That means, just by hiding the highlights, I avoided the “illusion of understanding”. I would mark the point as Good, but in actuality, I needed to mark it as Hard. In the “real world”, I don’t see color-coded sections of text anywhere right?
I wrote a browser UserScript to make use of it until the feature is added or not, Of course, it doesn’t work on the App, so it’s at best, a dirty workaround. I hope the staff will find the suggestion worthwhile and make it available everywhere, it’s not good to depend on userscripts.
UserScript
If it doesn’t work, refresh the review page.
A few useful links:
// ==UserScript==
// @name Bunpro Reviews Remove Highlights
// @namespace https://bunpro.jp/
// @version 1.0
// @description Remove Highlights on Bunpro Reviews, and show them after translated sentence shows
// @author imsamuka
// @match https://bunpro.jp/reviews
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
function recursiveClassToggle(element, onoff) {
Object.values(element.children).forEach((e) => {
e.classList.toggle("hidden-question", onoff);
if (e.children.length > 0) recursiveClassToggle(e, onoff);
});
};
function waitForElement(selector, callback) {
const observer = new MutationObserver((mutations, obs) => {
const element = document.querySelector(selector);
if (element) {
obs.disconnect();
callback(element);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
waitForElement('.bp-quiz-trans-wrap > .bp-quiz-trans', (el) => {
const observer = new MutationObserver((muts) => {
muts.forEach((mut) => recursiveClassToggle(document.querySelector(".bp-quiz-question"), mut.target.classList.contains('invisible')));
});
observer.observe(el, {attributes: true, attributeFilter: ['class']});
recursiveClassToggle(document.querySelector(".bp-quiz-question"), el.classList.contains('invisible'))
});
// Apply the CSS
GM_addStyle(`
.hidden-question {
color: #fff !important;
}
`);
})();
