Hi!
I am a newbie, I just started coding and struggeling with javascript and jQuery . Im stuck on a exercise in school. I am suppose to make a qz-game by retrieveing data through a API call. The user should get 10 questions with 4 answer alternatives per question, and also be able to choose one alt for each question. My script does to must part of if, but there is one big problem, the user is only able to choose one alt on the entire page! I don’t understand why? Please help me point out where I’ve gone wrong, and maybe also a hint on how to solve it
var getObj = data.results;
for ( var i = 0; i <= getObj.length; i++){
var questions = getObj[i].question;
var correctAnswer = getObj[i].correct_answer;
var wrongAnswer = getObj[i].incorrect_answers;
var row = $(".form").append("<p></p>");
row.append("<p>" + questions +"</p>");
row.append('<input type="radio" name="svar" value="correct">' + correctAnswer + "</input>");
row.append('<input type="radio" name="svar" value="wrong">' + wrongAnswer[0] + "</input>");
row.append('<input type="radio" name="svar" value="wrong">' + wrongAnswer[1] + "</input>");
row.append('<input type="radio" name="svar" value="wrong">' + wrongAnswer[2] + "</input>");
That blue dot won’t always be blue. On windows and linux, it’ll just be gray. It just looks nice on macOS. But, the reason it’s rounded is because it’s a radio button. With radio buttons, it means you can only pick one choice. Use checkboxes if you want to be able to select more choices. Now that I see the questions, yes there’s more than one answer, You also might only want to render the last two wrong answers if they exist. And for that, it would be a good idea for some looping
Can you put all the code in a codepen? Just go to https://codepen.io/pen/, paste in your code, save it, and link me it.
The color and the radio style is not that important. The important thing is that the user must be able to check one box per question. Right now I am only able to check one box on the entire page… In the end of the game I want to count the score, but that is not possible if the user only can check one box, well I can but there will only be one point
Oh, on the entire page. That’s because all the radio buttons have the same name attribute. Try putting the index (the variable i) inside the loop after the svar. So svar0, svar1, etc.
Not like that, here’s a fork how I meant: https://codepen.io/phpdude/pen/vwwMdY
You see, I put the index in. Right now, you can select all sorts of combinations of boxes. Is this what you wanted? Oh, and I noticed some invalid HTML. You can’t close an input tag. I’ll fix this in my pen plus all the other things to fix too…
That was in your pen, have a look at mine. I think everything is fixed… Except I can’t read the comments and the button text because it’s not English haha
What I meant was that you could check all the boxes on the page I think… or almost…
Well first I think i need some console.logs so I can find the correct answers. Oh, we need to scramble the numbers, the correct answer is always the first, too easy. I’ll fix that…
Okay, have a look now. Okay, finished! Read my comments to figure out what I did and what’s going on.
Oh… what does that in3.js file do? I don’t see any use of it.
If you need some documentation, developer.mozilla.org
I hope I didn’t use too advanced code
The main one is the .sort(() => .5 - Math.random()). That one will take a bit of reading docs It randomizes the array