3.2 Adding Placeholder Cards to a Quiz

So far we have really done nothing but create this concept of a collection of terms and definitions, or flashcards if you will, but we've only really talked about them at a In a very high level. We've only created this concept of a quiz that has a title in the description. There aren't really any cards or flash cards or whatever you wanna call them underneath there. And that's what we wanna focus on adding In this particular lesson, now, this is a fairly simple idea. What we're going to wanna do here is we're gonna begin to define within this data the concept of cards or flashcards or whatever have you. And what we're gonna do is we're gonna add a new property unto each one of these quizzes and we're gonna call it cards. And this is going to be a collection of objects or an array or a list of objects that we can then refer to and create as we go. So what I wanna do here is I want to create a couple of simple examples here. So we're going to create our first card, that's going to be part of Chapter 1. And each of these cards is gonna be fairly simplistic, we're gonna have we'll call it a term which is going to be some sort of word or whatever. And we could just call this Some Word, and then we'll create its definition which is going to be Some Definition like that, all right? And let's go ahead and do the same thing down below just to make sure that we have something in both of these, actually we don't need to have something in both of them. Let's put two in the first chapter and we're gonna come in here and we're gonna say the term is gonna be Another Word, and then this is going to say the definition of another word, just like that. Okay, so now we've got a couple of quizzes, we actually have two quizzes and we have a collection of cards that's associated with these quizzes. The first quiz has two cards in it, each with a term and each with a definition, and then the second quiz doesn't have any cards in it yet so let's go ahead and save that. So now what I wanna do is, I want to add a little bit of additional information to the quiz that I'm defining in here within this section right here. To display a little bit more information about how many cards are associated with this chapter. So, envision you're building up this collection of cards in a particular quiz, and I wanna know by looking at the highest level In here, how many cards are associated with that particular quiz. So this is actually gonna be pretty easy, what we're gonna do is we're gonna use Semantic again to add a little bit more information. And the way we're gonna that is we're going to come down within this pair of div which is going to be the ui centered card. In here we have this div class equal to content, and then we have these two sections here we have the header content, which is what's bold up on top. And then we have this meta, which contains the description which is right underneath it. So, what I wanna to do is I want to add another dip underneath here. So, we're gonna create another dip and this time this is going to actually be called extra content. So, what extra content does if I gonna save that, it's going to loss and add additional data down on the bottom, and its actually going to put a little bit of a the divider in there as well. So let's come back in here, and within extra content, I need to put something in there. So I'm going to create a span, and then this span is going to have a class as well, which is going to be, what I wanna do is I wanna have this data be kind of floated over to the left over here, and I wanna give it an icon too. So what I'm gonna do here is I'm going to say, when I want to float something in a direction either left or right as a class, I can give it the direction in this case, I'll say left floated. So it's gonna float this information, this content over to the left, and then within here I wanna place an icon, and like I said before there's a lot of information. There's a lot of things that are defined within Semantic UI, and one of the things that is defined within there are a number of different icons. And this particular icon that I'm gonna use, there's no flash card icons, but what I wanna use is it's actually called the sticky note icon. Which looks kind of like a flash card if you look at it closely enough, I guess. So if we come back over here, you now see that we have this little, I guess kind of looks like a sticky note, or what looks kind of like a flash card, if you want to think of it that way. And that's just what we're gonna call it in this case. So what I wanna do is I've got this nice little icon here and right next to it, I wanna display the number of flash cards, or cards, that I have within this particular quiz, or within this particular grouping. So let's come back over here and the way that I'm gonna do that is within here. What I can do is I can use more of my quiz data to display some information about the number of cards that I have. So once gain we're gonna use string interpolation, and I'm gonna use my double curly brackets, or my mustaches, and I can say I want to use quiz .cards this time. Cuz we've now added that property to our quizzes and I wanna get their length, so let's go ahead and save that. Now if I come over here, you're now gonna see that we've got our number here, but I've got it kind of in the wrong spot. I would like to have it up and next to it, so let's kinda come back over here and reformat this a little bit. So what I'm gonna need to do is take this out and we're going to stick it alongside the icon here. So we'll drop it down over here, we'll paste that in, save that and come back over here, and now we've got it right next to it. So now we see we have a collection here, we've got a Chapter 1 quiz that has a description. And now we also can see how many cards are associated with each one of these chapters. So now using Semantic UI, we've been able to very quickly and easily add some more markup here that's going to allow us to add some extra content. To our card that we've created here, and we can now see things kind of shuffle a little bit here. But one thing that I wanna do with this I mention before, is that I wanna be able to see that some sort of the divider everything's is kinda getting bunched up here a little bit. And the reason that it didn't show up there is because in order to get that divider I need to take this extra content, and I need to cut this out and actually has to go outside of the original content div here. So if I drop this outside here and then save that and come back over here, now we're going to get a nice little diving line here. So now I have the name of my card, or the name of my quiz, I have the description, and then I have a nice divider here. And over on the left hand side, I now have this little sticky note flash card icon, with the number of flash cards that are in it, so that's kinda getting us to that next stage. Now what I want to be able to do is create some new quizzes over here, I wanna be able to dynamically add and remove these things. So in the next lesson I'm gonna show you how to add some functionality, to be able to add some new quizzes to our application.