Additional type of flashcard

Archive Feedback
#1

It’s great that Remnote provides a number of flashcard types that can be seamlessly integrated into notes.

I sometimes have a need for additional flashcard type.

Let’s say that a rem is some paragraph of text. What I’d like to do is to ask some question about it, where this paragraph text is a response. Of course, I can do a basic flashcard but it doesn’t look nice when the question is long, and it looks especially weird if the question is similar to the response.

What I’d love to be able to do instead is to select the rem text, and add a flashcard question to it that would not be displayed as a part of the text.

For example, it could be displayed with a smaller font on the side, in grey font, where tags are normally displayed (just an idea how it could look like).

Another way to implement this would be to change the way selected basic flashcards are displayed so that they are not part of the text but something on the side.

This idea is somewhat similar to Cornell Notes system where you have a recall column with questions next to notes.

Cornell note style flashcard
#2

Here is a quick Custom CSS snippet to achieve such an effect.

Normal display:
image

Hovered:

image
image624×509 42.1 KB

They are normal basic cards and appear as such in the queue. Only the appearance in the editor is changed.

.EditorContainer { position: relative; }

[data-rem-tags~="aside-card"] .only_in_answer {
  position: absolute;
  font-size: 13px;
  height: 20px;
  color: gray;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 4px;
  padding: 2px 4px 4px;
  z-index: 2;
  background: white;
}

[data-rem-tags~="aside-card"] .only_in_answer:hover {
  height: unset;
  box-shadow: 0px 1px 4px 1px lightgray;
}
1 Like
#4

@ hannesfrank Thanks for getting back to me. It’s good to learn about custom CSS.

It’s not quite what I meant though. Let me try to give you a more concrete example.

Here’s an example of notes from a book. The text in bold is the name of a chapter. The paragraph is a quote from the book, that I originally highlighted in Kindle and then copied to Remnote. I’d like to have a question about this paragraph on the side. On the attached image, I put it above tags.

This way I can easily skim through my notes with key pieces of information and favorite quotes. I can also have flashcards for interesting paragraphs, without breaking the flow of information.

aside-card
aside-card1460×320 53.3 KB

I’m curious what you think about such a feature.

#5

So you’d need to use the backwards direction if you store the question in the hidden popup.

CSS can place the question bubble wherever you like, e.g. this is also easy:

image
image936×626 49.2 KB

Of course this is all pretty hacky. I just wanted to show what is possible :slight_smile:

With the in development extension framework one would later add a #Cornell Note powerup to the question which has a slot question;; <Your question for this paragraph> and the powerup generates it’s own cards for the queue.

CSS 
.EditorContainer { position: relative; }

[data-rem-tags~="aside-card"] .only_in_answer {
  position: absolute;
  font-size: 13px;
  height: 24px;
  width: 24px;
  color: gray;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 4px;
  padding: 2px 4px 4px;
  z-index: 2;
  background: white;
  position: absolute;
  top: -24px;
  transform: translateX(100%);
  right: 0;
  opacity: 0.3;
  transition: all 0.3s;
}

[data-rem-tags~="aside-card"] .only_in_answer:hover,
[data-rem-tags~="aside-card"]:focus-within .only_in_answer {
  height: fit-content;
  width: fit-content;
  box-shadow: 0px 1px 4px 1px lightgray;
  opacity: 1;
}
#6

Thanks for the tips. It’s great to see how customizable Remnote is.

Still, it would be interesting to know if you think it’s a good idea for a built-in feature.

#7

See the Feature Request linked above and either add to it or create a new one linking to that one to definitively find out whether other people think it’s a good idea (though obviously Hannes’s opinion carries more weight when it comes to actually implementing it).

#8

How do I make it a feature request? It’s been tagged with “help-wanted-custom-css” which wasn’t really my intention.

#9

Never mind, I found Feature Requests - RemNote.

#10

I created a feature request at Cornell note style flashcard.

1 Like