Cloze Deletions + Spaced Repetition In Obsidian with CSS

[TheBearJew]

Hi there - I just put this up on reddit:

The idea is inspired by Mochi. I’ve looked all over and couldn’t find something similar for Obsidian, so I scrapped together some code from various threads to make it happen. You can adjust the colors, fade timing, etc. below.

This is working very well for me so I wanted to share. I’ve liked combing this with admonition callouts too. Below is the css code and an example card. This is my first time writing code though, so if you know css, please help us make something better!

---

How to use:

1. Copy this code into a text file, save as a .css file in your obsidian snippets folder.
2. Open the settings and enable the .css snippet
3. Download SRS community plugin
4. Make a new note, tag it as a #review card. This will be your flashcard.
5. Change highlight hotkey to “cmd+shift+c” for full anki experience
6. Use the highlight or strikethrough feature
7. Mark the whole #review note Hard, Good, or Easy

---

Here are two snippets which work together.

I made it so the cloze only shows up in the editor. This way the pdf will still print with highlights and strikethrough and the overall note is not obscured.

• This one modifies the strikethrough feature to be a cloze deletion in the editor.

/*Cloze Deletion*/
/* Strikethrough in Editor */
s, .cm-strikethrough {
        background: rgba(216,216,216,1);
        color:  rgba(0,0,0,0);
        border-radius: 5px;
        padding-left: 5px;
        padding-right: 5px; 
        text-decoration: none;
        transition-property: background, color;
        transition-duration: 20s;
        transition-timing-function: ease-out;
        transition-delay: 0s;
    }

s, .cm-strikethrough:hover {
        background: none !important;
        color: red;
        cursor: none;  
        transition-property: background, color;
        transition-duration: 0.25s;
        transition-timing-function: ease-out;
        transition-delay: 0.25s;
    }

• This one modifies the ==highlight== function to be a cloze deletion in the editor

/*Cloze Deletion*/
/* Highlight in EDITOR */

s, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
	background: rgba(216,216,216,1);
	color: rgba(0,0,0,0);
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px; 
	text-decoration: none;
	transition-property: background, color;
	transition-duration: 20s;
	transition-timing-function: ease-out;
	transition-delay: 0s;
	}

s, .cm-s-obsidian span.cm-formatting-highlight:hover, .cm-s-obsidian span.cm-highlight:hover {
        background: none !important;
        color: red;
        cursor: none;  
        transition-property: background, color;
        transition-duration: 0.25s;
        transition-timing-function: ease-out;
        transition-delay: 0.25s;
	}

[TheBearJew]

Does anyone know of a way to:

• Define new elements for this css? For example, enclosing text with ||Cloze|| or {{Cloze}}
• Show a hint in front of the cloze? For example, in Anki it would be “Amaurosis fugax is a temporary {{c1::unilateral::unilateral vs bilateral}}”

[TheBearJew]

I reworked it to be a little better and with some more features:

s, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
background: rgb(175, 175, 175);
color: transparent;
border-radius: 3px;
padding-left: 7px;
padding-right: 7px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
transition-property: background, color;
transition-duration: 5s;
transition-timing-function: ease-out;
transition-delay: 10s;
font-weight: bold
}

s, .cm-s-obsidian span.cm-formatting-highlight:hover, .cm-s-obsidian span.cm-highlight:hover {
background: #FFF09B;
color: #3B4252;
cursor: none;
transition-property: color;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
font-weight: bold
}

s, .cm-s-obsidian span.cm-formatting-highlight:active, .cm-s-obsidian span.cm-highlight:active {
cursor: auto;
}

[BobFridge]

Hi. This is great stuff. Is there a way to have the close deletions in read view? And if I publish a file with it on Obsidian Publish would it still have the cloze deletion?