0

I have some html/jquery/css which I have combined to create a multiple choice style quiz, which is working quite well. When a user clicks on a choice, the choice list is replaced with the appropriate answer. I have added a working codepen link at the end of the question.

I wish to identify the html contents of the most recently picked choice so that I can understand when a user has reached the end of their questions, and thus append a separate block of text, however, I am struggling to do this.

Specifically I have narrowed down what I wish to do, and pared down my code to make it easier to read. The javascript looks like this:

  $('div[class*=inlinechoice').on('click','.question', function(e) {
  var $this = $(this),
  $id = $this.prop('id');
  alert($('[class*="answer-"]').eq($id).text());
  });

And the html looks like this:

    <div class="inlinechoice-0" id="0">
    <a class="question" id="1">Choice 1</a><br>
    <a class="question" id="2">Choice 2</a><br>
    <a class="question" id="3">Choice 3</a>
    </div>

    <div class="answer-1">
    You picked 1.  
    <div class="inlinechoice-1" id="1">
    <a class="question" id="4">Choice 4</a><br>
    <a class="question" id="5">Choice 5</a><br>
    </div>
    </div>
    <div class="answer-2">
    You picked 2. 
    </div>
    <div class="answer-3">
    You picked 3. 
    </div>
    <div class="answer-4">
    You picked 4. 
    <div class="inlinechoice-2" id="2">
    <a class="question" id="6">Choice 6</a><br>
    <a class="question" id="2">Choice 7 (2)</a><br>
    </div>
    </div>
    <div class="answer-5">
    You picked 5. 
    </div>
    <div class="answer-6">
    You picked 6. 
    </div>

And finally the css looks like this:

    div[class*='inlinechoice-'] { cursor: pointer; }

    div[class*='answer-'] {display:none;}

I have attached a codepen link of the above, it doesn't seem to work in chrome, but runs on IE okay.

At the minute, what this seems to do is pick up the answer text of the next answer block to that selected. So, if you click choice 1, the alert returns that you have selected answer 2. I understand this is because the eq($id) is actually bringing back the index, but I thought I could just minus one from the $id to get the correct answer but that doesn't appear to work at all (the alert just returns as empty). I've tried hard coding in the index, so for example .eq(0) returns the contents of answer-1, so I know it can work, but I don't want to hard code it, as I want it to return the information based on the users input. This is probably not even the best way of going about this (it seems laborious to take the id number, subtract 1 and then add it to the eq() function), but I've been on this all day and this is the closest I've managed to get to returning what is required.

Codepen of full project is here (Note that this is almost working, it appends content to Choice 2 and 3, but not to Choice 1 which is nested.)

Jsfiddle of stripped code is here

bawpie
  • 467
  • 4
  • 12
  • 27
  • 1
    FYI the fiddle isn't working only because you don't have the script defined on document ready, just placed in the `head`. Change it to `onDomready` and the script will fire. – Goose Feb 28 '14 at 22:45
  • Is there a reason you have things nested the way you do? For example, the `inlinechoice-1` div is nested within the `answer-1` div. Or should each inlinechoice and answer be a separate element? – Goose Feb 28 '14 at 22:52
  • @Goose, each inlinechoice is hidden when a choice is selected, if you look at the full example code on codepen there's an additional bit of script which removes it. Inlinechoice 1 is nested in answer 1 because if someone chooses answer 1, they get an additional choice afterward. – bawpie Mar 01 '14 at 07:28

1 Answers1

1

You could change you javascript to concatenate the id instead:

$('.inlinechoice-0').on('click','.question', function(e) {
    var $this = $(this),
        $id = $this.prop('id');
    alert($('.answer-' + $id).text());
});
Michael Burns
  • 630
  • 2
  • 5
  • 10
  • Well, that certainly does work in the stripped down code - I had tried it in the full code earlier and it just returned empty but I've seen by moving it up earlier in my code makes it work! I knew I had a lot to learn, but thank you for your response as it at least clarified things for me! – bawpie Mar 01 '14 at 07:28