Plugin: Spoiler cards

Plugins
1

Hello everyone!

Recently I have created a plugin for myself, so now I am sharing it!
This is my first attempt at creating a plugin for Joplin.

I always felt like I needed to create a card of some sort with an extendable body. You could do that in plain html, but it just felt like there something was missing and it would be just tedious to copy and copy the same plain html all over again.

This plugins allows you to create these spoiler cards from a specific format. The cards display as spoilers with titles until clicked on to be extended.

cards-plugin-preview
cards-plugin-preview809×441 3.88 MB

The styling of cards is made to my liking, but you can customize it yourself.

I am not quite sure how the publishing of plugins works yet, so I published a npm package, as well as the github repo for now.

Note: I have not thoroughly tested the plugin yet, but to my knowledge it works for me.

If there is any feedback or bugs, I'll try to fix them when I find time.

Github repo:

24 Likes
2

Nifty! I have been wanting something like this.

Discourse actually has this feature. You can get it by clicking on the gear editor. This is what it looks like:

Summary

This text will be hidden

[details="Summary"]
This text will be hidden
[/details]

I don't know if that is some kind of standard, but it's much more human readable than what you are using. Although what you have is much fewer keystrokes.

1 Like
3

Another way is to paste the following as markdown:

Summary

Some text

print("hello world!")


<details>
<summary>Summary</summary>
Some text 
</details>
1 Like
4

Thanks. I like it instinctively and have installed it, but I can't think of a good use for it yet. Maybe something like questions for a quiz that you reveal the answer to? Any other real use ideas?

1 Like
5

I agree with it being unreadable, so I've decided to reformat it. I've tried to keep it simple and not too complicated with the amount of typing.

Now it's using the follow format:

:[
Card name here...

Card body text here...

]:

There's no need to use a code block.
Note: the empty line above and below card body text is needed for now.

Hopefully this way it's a bit more readable + now the editor highlights markdown components as well.
Generally it should work, hopefully there's no major bugs. Plugin will probably be updated a bit later.

3 Likes
6

Any way you like it, maybe you would like to keep your document compact so you would use something like this in order to hide walls of text.

Another idea you could use it as a way of studying. If you like studying with cards, where you hide answers before trying to answer it yourself, it definitely could help.

7

On Tools > Options > Plugins > Search: Spoiler cards > Install I only get this message: Could not install it: No manifest for plugin ID "undefined". Any suggestions?

8

Thanks. By the way, why are these called spoiler cards? I don't think I've ever heard the term before.

9

I could not seem to recreate this issue, as the plugin works for me, I tried unistalling, restarting, it still works. Note, that you need Joplin 1.7 to run this. At the moment I have no other suggestions.

10

Yes, it is just something I came up with. Cards for me have a title and description, so I used that + joined with the spoiler (as you can hide and view the body).

11

With Joplin 1.7.5 it didn't work, but with 1.7.11 it does. Thanks.

1 Like
12

Just installed it and ... I like it :smiley:
I create a lot of development notes for myself and often wrestle with the lay out.
With this plugin it seems a peace of cake! Thank you!

1 Like
13

I also use this way. :+1:

14

Thanks for your plugin. It will be a good option to have notes as anki or similar.
By the way, I try to change the look and feel of the notes as you say and the answer (sumary-content )change as i wan´t but not the title (sumary-title)which mantain the original aspect. It´s not a problem but only to know if i must do any other think.
I try to use...

/* Estilo de las tarjetas: preguntas */
.summary-title {
    background-color: #005174;
    color: #add8e6;
    font-family: 'caviar dreams';
    font-size: 18px;
    text-align:justify;
}

/* Estilo de las tarjetas: respuestas */
.summary-content {
    background-color: #292D3E;
    color: #85E785;
    font-family: 'caviar dreams';
    text-align:justify;
  
}

In other hand, the only option i see to make a question with several options like a test is using a break, for example:

Which virtual machine does VMware recommended be manually excluded from the Distributed Firewall?<br><br> A. NSX Manager<br> B. Microsoft SQL Server<br> C. vRealize Automation Appliance<br> D. vCenter Server

Correct Answer: D

Is there any other way to make questions with a break lines or other structure?
Tkx in advance.

17

Hmm, I am not quite sure why it does not change the title, if I understand correctly. I have tried your code and for me it changes both the title and the body to your style. Note, that you must restart the application for the user styles to be in effect.

Unfortunately, for now it is not possible to do that in any other way, as the parser reads the first line entirely for the title card, meaning that if you dont insert <br> the breakline won't be detected as the title. You can always just put the quiz question out of the card, above it and just have a card with title Correct answer: and then the body with D.

However it could be a good idea to add a new structure (like a quiz card), but built differently. That would probably be possible to make with some html and css.

18

I didn't find your earlier format unreadable at all. In fact, it was very readable. The benefit over [details="Summary"] I'm assuming is that your plugin allows Markdown in the summary. But your new format will not allow a blank line in the summary? I think that's a step backward. Maybe instead of :[ or a blank line as a separator, use ===.

1 Like
19

Thank you for your work
I have installed the plugin and it is going great.
It can even be nested.
The only problem is, it doesn't come out in print or when exporting to pdf or html.
Can you help?

20

I have changed the formatiing as I think it was easier to write this way (less keystrokes, less characters). But yes the title is rendered as inline markdown, and it only reads the first line, because I was not counting on putting more lines into the title (atleast for me one single line would be enough for a title).

I could come around and expand it so it would allow multiple lines in the title without using <br>, but I would not like to reformat the whole thing, because that may already ruin the previous format, which some people already used. Although on the other hand a seperator would be nicer to use, I agree with that. I'll look into that for sure.

21

I have noticed that nesting works as well, but with some bugs, I haven't really looked into that.

Rendering into the pdf format is also something I haven't looked into, I thought that that was something that couldn't be done with the plugin. Maybe there's some settings that I can add or change in order to allow the rendering of html, but at the moment I am not familiar with that.

22

Hello everyone again!

I have completely updated the whole plugin with new updates:

Spoilers - Version 1.0.0
Major update:

  • Plugin now allows you create inline spoilers, which can show/hide text by toggling

inline-spoiler-preview

Syntax:

%%spoiler%%

Minor update

  • Added button and shortcut Ctrl + Alt + P for spoiler block
  • Added button and shortcut Ctrl + Alt + O for inline spoiler

Fixes:

  • Rendering now works with the plugin (spoiler blocks get extended and show the content, but you can style out exporting styles as well)

This is one of the last things I wanted to add to this plugin, might update bugs from time to time, but other than that I don't think I won't be adding anything major here anymore. The update should be available in some time.

Cheers :slight_smile:

1 Like