Mac/iOS flashcards app

I have been using Studies to, er… study for the bar. Mac-like interface, and very intuitive (IMHO). Five stars. Check it out.

Great write up @ryanjamurphy, where do I send the invoice now that you’ve cost me AUD38.99? :rofl:

2 Likes

Mochi.cards is Anki, but better in every way. I could never get into using Anki consistently because it was too clunky, fiddly, not aesthetically pleasing, and didn’t sync and flow as smoothly between my iPhone, iPad, and MacBook. I think Mac users have pretty high standards with all that stuff. It’s honestly one reason I still struggle with Obsidian (though the new update has been pretty fantastic). Anyway, people should give Mochi a try. It’s beautiful and extremely easy to use. Anybody that loves Obsidian will fit right in.

Is it better than Quizlet? I’ve seen it in Setapp and was thinking about trying it out.

I don’t see Quizlet in Setapp. They do have Studies.

I didn’t like the iOS and iPad interface, it also was a little bit buggy.

It’s not. I was talking about Studies. My bad for the miscommunication.

1 Like

Quizlet looks like (correct me if I am wrong) premade flash cards for various subjects. For those I use Brainscape.

1 Like

You can make your own on Quizlet, however, I think they don’t have an implementation of spaced repetition, that’s why I cancelled my subscription.

GoodNotes has a flash cards feature that works pretty well, if you use that app.

1 Like

'twas a few years ago but I will see if I can dig up the code for you. Might be a couple of days before I get to it though!

1 Like

No problem, thank you!

Now that I look at the configuration, I’m actually apprehensive in sharing the CSS. IIRC it was quite a lot of fiddling to set up and it was so long ago that I cannot recall the steps. In turn, I’m afraid I can’t offer support or troubleshooting help on setting this up!

Still, if you want to try (maybe it is much easier than I remember!), I’ll put everything below the fold, including screenshots of how the cards were set up.

I think the first step is to add or edit a Note Type with the below and to make sure the cards you’re adding are of that note type. Anki’s documentation is excellent: https://docs.ankiweb.net

Good luck!

Ryan's Anki card set up and styling

Cards:

Front template:

<div class="fileinfo">
<div class="reference">{{Deck}}</div>

<div><div id="tags-container"></div><div class="button"><a href="x-devonthink-item://{{File path}}">Mobile</a>  |  <a href="x-devonthink-item:///{{File path}}">Desktop</a></div></div>
</div>

<div id="tags-container"></div>

<div class="frontbg">

{{Paragraph}}

</div>

<script>
var colors = [
  // Add more colors to this array as necessary
  "#f44336", "#9C27B0", "#3F51B5", "#03A9F4", "#009688",
  "#C0CA33", "#FF9800", "#FF5722", "#9E9E9E", "#607D8B"
]
var tagContent = "{{Tags}}";
if (tagContent.search(" ") >= 1) {
  var tags = tagContent.split(" ");
} else {
  var tags = [tagContent];
}
for (var i in tags) {
  var newDiv = document.createElement("div");
  newDiv.id = "tag";
  newDiv.innerHTML = tags[i];
  newDiv.style.display = "inline-block";

  newDiv.style.backgroundColor = colors[i]; //comment out for outline
  //Choose outline
  newDiv.style.border = "1px solid" + colors[i]; //comment out for background-fill
  document.getElementById("tags-container").appendChild(newDiv);
}
</script>

Styling (shared between cards)

ruby rt {
 visibility: hidden;
}

ruby:hover rt {
 visibility: visible;
}

a {
 color: #bdbcc1;
}

u {
 text-decoration: none;
 border-bottom: 1px dotted;
}

mark {
background-color: #bdbcc1;
opacity: .66;
border-radius: 2px;
padding-left: 2%;
padding-right: 1%;
padding-top: .1%;
margin-right: 1%;
}

.card {
 font-family: "Adobe Garamond Pro";
 font-size: 18px;
 text-align: left;
 color: black;
 margin: auto;
 width: 66%;
background-color: #231F20;
}

.frontbg {
 background-color: #444653;
 border-radius: 7px;
 color: #fff;
 position: relative;
 left: 0;
 padding: 3%;
}

.fileinfo {
 position: relative;
 top: 15px;
 font-family: "Raleway";
 border: 1px dotted #8C8279;
 background-color: #2C3E50;
 color: white;
 font-size: 10px;
 width: auto;
 padding-top: 5px;
 padding-left: 10px;
 padding-bottom: 1%;
 padding-right: 10px;
 margin-bottom: 35px;
}

.button {
 text-decoration: none;
 text-align: right;
}

.reference {
padding-bottom: 2%;
padding-top: 1%;
font-family: "Raleway";
font-size: 20px;
font-weight: bold;
}

.backbg {
 position: relative;
 top: -3px;
 background-color: #fff;
 padding: 15px;
 padding-bottom: 15px;
 padding-left: 30px;
 padding-right: 30px;
 border-radius: 0px 0px 10px 10px;
 color: #2C3E50;
 font-size: 20px;
 text-align: left;
}

.iphone .card {
 font-size: 18px;
 width: 90%;
}

.iphone .reference {
font-size: 20px;
}

.iphone .fileinfo {
 font-size: 14px;
}

.iphone .backbg {
 font-size: 18px;
}

#tag{
 border-radius: 3px;
 padding: 0.25rem;
 margin: 0.25rem;
}

Back template

{{FrontSide}}

<div class="backbg">

<u>A.</u> 
<div>{{Highlight}}</div>

</div>

Sample card

Fields

CleanShot 2022-10-21 at 13.25.48

2 Likes

I appreciate this so much! Thanks for taking the time :slight_smile:

1 Like