Print Typed Radio Button with airSlate SignNow

Send typed radio button

hi again here we are to continue talking about making our JavaScript quiz right and so far we've we've got you know that the questions showing up but now we need to list our multiple-choice answers right and you know we've got our our you know our form set up here and we're showing the the question here as an h1 and then we've got a ul here and we want to create a list of answers and so the goal for this is to grab all of the strings from this array and then wrap each one in an Li and an input with a and make them a radio button right so it's it's a little complicated right but let's just see if we can get started right so so how are we gonna do it well but I think like there's a bunch of ways you could do this we could just write inside you could actually just do it like this you could say you know dollar sign curly brackets and then you could do a for each loop inside here and I I think that that's a good method it works fine but it could get pretty ugly because you know you could say you know question you know dot answer that's an array and then dot for each and you know and then this is getting pretty long and complicated right you know so it might look like that right and I think that that's okay there's nothing wrong with it what I'm gonna do though is I'm gonna take this out and I'm gonna ask myself well you know before I can't before I you know I'm able to list these things what do I need to do so my answer is like well I need to make a list of of these items here right so why don't I actually do that before I start making the form right so I'm actually going to do it outside here and then I'll just put maybe I'll just put answers right there right and so I'll make a variable called answers so I'll say you know answers actually it's declare it let's say lik let answers equal you know an empty string and then I'll do you know quiz or questions question not questions with an S right because it's going to be this question here I'll say question dot a that's my array of answers dot for each and then each answer will be passed into this Oh act I forgot to put the function in here right what am I doing here that was not right let's fix that right so I'm gonna say question dot a dot for each and then I'm gonna put a function in my for each here and then I'll have the answer passed into that function so now remember I can actually I can see it right here let me zoom out just a tiny bit right okay when I get to question here right questions is the entire array up here one question is one object within that array one of these right and then if I do dot a on that question I'm getting this array of answers and each answer is a string right and when I'm doing for each for each you know value here I'm getting one of those values as an answer right so this should be one of these guys and it should be one you know it should do it once for each of them right okay great so let's zoom in a little bit here and so what are we gonna do well let's take our answers actually let's just call this into the answer up here let's call this answer string okay that'll kind of remind us that it's a string plus it clashes with this variable here rights so let's let's call that answer string and then we'll say answer string plus equals and we'll use the backticks again and what we want to do is each answer is going to be a list item like this and then inside each of these list items we're going to have a label oops label there we go right and inside the label see this gets pretty complicated that's why I think like maybe it's better to do this outside of here right so inside the label we're gonna have an input okay and it'll be type radio' because we want to do radio buttons right and you know and then we'll need to do a little more with this because remember radio buttons need to have a name and they need to share that name with everybody right but first of all let's just get them to display so I've got my label here and what am I gonna do here I think I'm gonna put the text after the label like this maybe right so I'll put this guy here so it'll be input followed by the text and then I'm going to use the dollar sign question mark and the answer remember is the string for the answer soft with that here okay so there's my my label and we want to do the label because you'll be able to click on the answer text to activate the radio button so you won't have to just click on the little circle right so there we got type radio I've got my answer here and then now oh yeah I made this answer string so I'll have to change it down here because I'll like when I'm all done looping through the answers and making the list I want to take all those Li tags and plug them into this ul right here so this answers down here will be answer string right okay let's see that a try and see if it's working for us right so I'll go to the to the browser here and there's our quiz so that hey that's looking pretty good right and I can click on you know each of these radio buttons I can click I don't have to just click on the circle here I can click on the the text here and it activates the button right we can style away this bullet point so don't worry about that I know everybody's gonna be annoyed by the bullet point but when we get to our style sheet that can be gone right we can customize these these radio buttons too so everything seems to be working pretty good we still need a couple things right so right now if I actually we need a lot of things still right but right now the first thing I'm thinking of is that if you you know click on one of the radio buttons you should only be able to choose one and right now when I click on this one I can choose both right or even all three and the problem with that is because the input right here on these are grouped by their name so if you have radio buttons that share the same name only it within the same forum only one of them can be active at a time but right now my radio buttons don't have a name so they're not grouped right they're all independent right so let's give them all a name so we got to decide like how to name them okay so you know you know the names need to be unique across the forms too right so so what we can do is we can we can take the number right so we can say like hey all you guys are gonna be like question 1 right you know something like that and then these guys when we do our second question you guys will all be radio button name question - okay here's a thing about for each so for each takes a function it's a callback and then that callback gets a couple parameters from for each right it gives you the value from the array that you're calling for each on and then it also gives you an index so I'm gonna put an eye here and actually if we wanted the index for the answer we could put the eye here also but this could be a problem if we have I twice because you know they're they're the same variable name so we'd be able to access the I here but we wouldn't be able to access this I within here because it would be this one okay so let's change this a little bit let's say let's call it question index or queue index and this will be like answer index right we actually don't need this one but I'm gonna put it there anyway okay so now I've got my question index right and I want everybody in here to have the same question index okay so I'm gonna go in here and give my radio button a name property and I have to have the quotation marks here so I'm going to say name equals quotation marks and then within the quotation mark so I'll use the dollar sign curly brackets and I'll add how about let's do let's do this let's say question - I'm gonna put this actually outside so everybody else a question and then what I want to do is have the index there right so I'll say cue index so this should generate an attribute on each HTML element with the name question - followed by the number of the question so that means that each question will be numbered 0 1 2 3 right and within that for each of the answers each answer will have the same number here so it'll be question 1 question 1 question 1 for the first three answers and then question two questions 3 you know question 2 question 2 for the next one right well it's actually I'm not doing a good job explaining that let's actually look at it right so I'm going to refresh my page here and seems to be working and now when I click you'll see each one of these only one of them can be active and when I click down here only one of these can be active so let's understand like why that works again inspect and when I look at the the elements here you can see that in this list right here the second list it says name is question one name is question one and the third possible answer is question one okay so question 1 question 1 question 1 right and then if I went to the first I guess that is the first form I don't know why that oh yeah you know what it wait it's the way up here sorry and if I go to my first form you'll see this one's question zero and the second one will be question zero right so as long as all three of these have the same name then only one of them can be active okay okay great so that's working pretty good um what else do we need to do here I think before it between now in the next video I'm gonna change my spacing to two spaces here because it's driving me nuts that this is tabbed so far over right but I'll deal with the formatting offline before I do the next video anyway um maybe that's a good place to stop and then we'll continue remember down here we've kind of outlined like what we need to do and so far we've got our form so that's like that's like check oops we got late we got this guy we got our h1 we don't have the div alert so we got to put that in and we've got our UL and we've got our Li tags and we don't have the submit button so we'll need to add those right why don't you try that on your own so you can add those elements the same way that I added the list items and the UL and the h1 and stuff so try that on your own and then I'll cover it in the next video and then we'll continue and again we have still a lot to do because we'll want our we'll actually want the the order of the answers here to be random right so we'll want to mix those up and then maybe we'll want to you know also you know check when you click that submit button whether the question was correct or not right so anyway thanks for watching and I'll continue this in the next video