Active Recall Learning Custom CSS

@hannesfrank, I really miss your “Active Recall Learning” Custom CSS that broke with the last update. Do you have plans of updating it? Thanks for your patience!

1 Like

Use this. :stuck_out_tongue:

:root {
    --hide-answer-filter: contrast(0%) brightness(1.5);
}

/*********** Hide Cloze and Backward ***********/
	[data-rem-tags~="active-recall"] span:not(:hover):not([data-rem-tags~="learned"]).cloze,
	[data-rem-tags~="active-recall"] .only_in_answer {
	    background-color: white;
	    filter: var(--hide-answer-filter);
	    border-radius: 5px;
	    padding: 2px 3px 2px 3px;
	    margin: 0px 3px 0px 3px;
	    position: relative;
	    top: -2px;
	}
	

	[data-rem-tags~="active-recall"] .cloze {
		background-color: black;
		color: yellow;
		border-radius: 5px;
		border-bottom: 2px solid red;
		padding: 2px 3px 2px 3px;
		margin: 0px 3px 0px 3px;
	}

/*********** Tag Declutter ***********/
	[data-rem-tags~="active-recall"] .hierarchy-editor__tag-bar,
	[data-rem-tags~="active-recall"] .items-center.hierarchy-editor__tag-bar__tag {
		background-color: transparent !important;
	}
	
	[data-rem-tags~="active-recall"] .hierarchy-editor__tag-bar__tag span {
		display: none;
	}
4 Likes

Fantastic! Many thanks for sharing!

Just an observation: I realized that, unlike Hannes code, in yours we have to tag every rem, and not only the parent rem, correct? Or am I doing sth wrong?

Thanks!

1 Like

Yes, correct. :sweat_smile:
It could be a hassle but there’s no way to tag in the parent rem (No selector applicable)

1 Like

@Browneyedsoul, just a question, did you realize a way for collectively removing the tags from various rems simultaneously, or we have to click the “x” mark rem by rem?

Are you inconveniencing every tag turns into “x” mark?
If then, there is another solution.

No, @Browneyedsoul, I just want to know how, after finishing the learning activity using these tags, would I remove them to return to the status quo ante, with all the material overt, not hidden anymore. The “x” marks aren’t problem at all. I saw that you decluttered the name of the tag, in a way it is reduced only to the “x”; this was terrrifc!

Thanks!
Unfortunately you have to turn off clicking the x button :sweat_smile:
because you tagged them one by one so you have to turn off one by one.

Hope someday parental rem control would be applicable.

1 Like

In fact, it is possible (I imagine you know better than me, but I’ll say anyway, as it can be useful for other readers) to tag all rems at once, by opening the rem “active recall”, copying it as a tag using Ctrl+Shift+S, and then going to the parent rem of the material you want to hide the answers (by applying the tags), using Ctrl+Shift+⇩ to expand all children rem, selecting them all and then pasting the copied tag using Ctrl+V.

But to turn off, there is no way but turning off one by one, as you said.

2 Likes

How about undoing the pasting of the tag with ctrl+z?

@UMNiK I think he said about long-time after learning the clozes things. not right after.

AFAIK hovering shouldn’t count as an action, so unless you are also editing the rem, you would still have the latest action in the undo queue be the pasting of the tag.

Incidentally, might it be worth reverse-engineering the native ##Suspend Cards tag to see how it propagates to all children?

2 Likes

Wow good point. As soon as you pointed out, I did a research about suspended card and their effect of children but I guess It was not controlled by css base but javascript base. Anyway, you are very sharp and smart haha. :smiley:

1 Like

Hi, @Browneyedsoul
image

It seems that active-recall css doesn’t work in the v1.5 remnote, Or am I doing sth wrong?

I haven’t updated
It seems that you want A.R. by parental tagging right?
If then Try this instead :smiley:

oh, I found the solution. It’s my mistake.that my rem’s title is wrong. thank you very much

1 Like

Hi, I’m back again, is there any way to make the height of the gray squares smaller❓
image

If then, Add zoom adjustment
Here It is

:root {--hide-answer-filter: contrast(0%) brightness(1.5);}
/*********** Hide ***********/
	[data-rem-container-tags~="active-recall"] span:not(:hover):not([data-rem-tags~="learned"]).cloze,
	[data-rem-container-tags~="active-recall"] span.only_in_answer:not(:hover):not([data-rem-tags~="learned"]) {
	    background-color: white;
	    filter: var(--hide-answer-filter);
	    border-radius: 5px;
	    padding: 2px 3px 2px 3px;
	    margin: 0px 3px 0px 3px;
	    position: relative;
	    top: -2px;
	    zoom: 0.8;
	}
	[data-rem-container-tags~="active-recall"] .cloze {
		background-color: black;
		color: yellow;
		border-radius: 5px;
		border-bottom: 2px solid red;
		padding: 2px 3px 2px 3px;
		margin: 0px 3px 0px 3px;
	}
/*********** Darkmode Compatibility ***********/
	.dark-mode .cloze {
		background-color: rgba(210,225,248,0);
		color: #fff;
		border-bottom: 2px solid var(--darkmode-contrast);
		padding-bottom: 2px;
		margin-left: 3px;
		margin-right: 3px;
		padding-left: 3px;
	}
	.dark-mode #show-embedded-search-button {filter: invert(1);}
/*********** Tag Declutter ***********/
	[data-rem-tags~="active-recall"] .hierarchy-editor__tag-bar,
	[data-rem-tags~="active-recall"] .items-center.hierarchy-editor__tag-bar__tag {
		background-color: transparent !important;
	}
	[data-rem-tags~="active-recall"] .hierarchy-editor__tag-bar__tag span {display: none;}
1 Like

Thank you very much for this active recall, I love it! I think applying this to image occlusion cards would also be wonderful.

2 Likes