JavaScript and jQuery

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 :slight_smile:

    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>");
    

Sorry, but I’m not sure what you mean by that.

The values of the radio buttons should be unique. Try wrong1, wrong2, and wrong3.

Thank u for taking time to answer.
By alt I mean answere-alternative

Unfortunately, your suggestion makes no difference… :frowning:

I Think I need to do som loop-thingi :slight_smile: “for each question, insert answers, and for each answer insert the “input” form”… but Iam not sure.

Or can it be because I only have one form in my html for all answers / inputs, do I need a form per question?

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 :smiley:

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. :slightly_smiling_face: 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 :smile:

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.

https://codepen.io/Buggis/pen/JqqVrw

1 Like

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… :slightly_smiling_face: 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…

Yes! problem is solved… omg so fast! :smiley:

But my alert in the btn is going crazy Haha! Whats wrong with my loop?

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…

nothing interesting to read there! :joy:

1 Like

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.

Thank u for helping me! and for commenting the code. I’ll be up all night trying to figure it out for my self :slight_smile:

in3.js in the html file u mean? Dont u need to link your script?

1 Like

No, codepen links it automatically. And it probably has a different name like script.js.

aha, I just copy pasted my code from atom…

1 Like

Actually, Iit just puts the script tag inside the HTML. But there is a file with it somewhere too.

BTW, did I guess your Swedish correctly? (I put my guess in the comments when I could guess)

If you need some documentation, developer.mozilla.org
I hope I didn’t use too advanced code :slightly_smiling_face:
The main one is the .sort(() => .5 - Math.random()). That one will take a bit of reading docs :open_book: It randomizes the array

1 Like

What if I dont want to randomize the anserws?