The Pieces of a Flashcards App

This is going to be a different kind of NixMash post because we’re not going to look at any code. Instead we’re going to look at the various pieces that comprise a Flashcards App. It’s the newest feature on NixMash Spring and can be viewed here.

Flashcards are displayed in a Bootstrap Carousel. Multiple Flashcard categories are supported, so each Flashcard is assigned a category. Above each image is a “Show Answer!” button which displays a content block describing the Flashcard Image. A “Return to Flashcards” button resumes the Flashcard view.

Enough talking. Let’s go to the screenshots! Here’s the Flashcard display in the Bootstrap Carousel. Above the image you can see a dropdown Category Selection and a “Show Answer!” button.

Below is the Flashcard description shown when the “Show Answer!” button is clicked. As you can read from the description, we’re looking at the entrance to the Magic Hat Brewery in South Burlington, Vermont. (I’m a loyal customer…) There’s a Flashcard Title, an image and a text area below the image. The “Return to Flashcards” button will take us back to the Carousel.

Leveraging Application Components

If the Flashcard Answer content area looks familiar to NixMash Spring folk, that’s because it’s a NixMash Spring Post, complete with tags and sharing buttons. It’s a new Post Display Type called Single Image Post Format. Shown below is what a Single Image Post looks like in the Posts Stream.

What does that mean for creating Flashcards? It means that the content area for flashcards is created like any other post. Here’s the Post Edit Form we’ve seen before. Notice the red Post Display Type dropdown currently reading “Single Image Post.” That indicates the post can serve as a Flashcard Description. If you “Publish” the post it will be displayed in the Posts Stream, otherwise as a “Draft” it will display with Flashcards only.

Creating Flashcards

As you have probably already guessed, creating flashcards is a two-step process. So far we’ve created a flashcard content page, but not the flashcard itself. Here’s the form in Administration where we create the Flashcard. We provide a brief description, choose the Flashcard Category, select our Flashcard Image and we’re done.

We haven’t yet linked the Flashcard with its Description Content, the Single Image Post we created earlier. We do that next. Notice that our Magic Hat Brewery Entrance Flashcard has not yet been associated with a Content Description. Flashcards must have an assigned post to display in the Carousel.

Selecting the “Magic Hat Artifactory Entrance” Post from the dropdown completes the Flashcard creation process. Only the new SINGLEPHOTO_POST post types will appear in the dropdown selector.

In Summary

To summarize how Flashcards are designed and managed, Flashcards are images assigned to a Flashcard Category. They are viewed by Category in a Bootstrap Carousel. When the “Show Answer!” button is clicked the Flashcard’s HTML Content Description is displayed. This HTML Content is actually a Single Image Post. So to create a Flashcard, its Description Content is created as an ordinary Post with the “Single Image Post” Display Type. The Flashcard is created separately with a simple form which uploads the Flashcard Image, after which the Flashcard is linked to the Description Content to complete the process.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.