Active Recall Learning Custom CSS

Plugins and Custom CSS CSS
#1

@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!

2 Likes
Hide back of the card when not in practice mode? Switch from multi-select to regular?
#2

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;
	}
5 Likes
#3

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
#4

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
#5

@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?

#6

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

#7

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!

#8

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
#9

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
#10

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

#11

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

#12

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
#13

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
#14

Hi, @Browneyedsoul
image

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

#15

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

#16

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

1 Like
#17

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

#18

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;}
2 Likes
#19

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

4 Likes
#20

Just want to thank you for this. It has helped me so much in my studies. I plan on using it a lot. Thank you so much.

1 Like