CODEWITHSUNDEEP
javascripthtmlknockout.jsonclick
sn0wy
sn0wy

Reputation: 69

JavaScript On-click

I have this document, which allows me to have a multi-choice selection questionnaire with progression on-click.

How do I go about having images in-place of the words here? (and still have the mechanic where, once the [image] is clicked, the next question is brought up)

I tried already some basic div manipulation with f.e the UL/H1 setting background images, but as you expect, this lead me to nothing of use.

I'm curious if it is because 'caption' needs to be something else.

            var questions = [
                {
                    caption: 'Question 1?',
                    answers: [
                        { caption: 'It sucks!' },
                        { caption: 'It rules!' }
                    ]
                }

The rest of my code in-progress found at: http://jsfiddle.net/Rbzy6/19/

Upvotes: 1

Views: 198

Answers (1)

Dim13i
Dim13i

Reputation: 2015

What about doing something like this: fiddle

What I do is that I set as answers the name of the image:

var questions = [
        {
            caption: 'Question 1?',
            answers: [
                { caption: 'It sucks!' },
                { caption: 'It rules!' }
            ]
        },
        {
            caption: 'Question 2?',
            answers: [
                { caption: '_62880798_62880797.jpg' },
                { caption: '_62880035_62880034.jpg' }
            ]
        }
];

Then, after:

self.currentQuestion(questions[currentQuestionIndex]);

I add this jQuery code:

$('#lol').find('li').each(function() {
    var imgPath = 'http://news.bbcimg.co.uk/media/images/62880000/jpg/';
    var imgName = $(this).text();
    $(this).html('<img src="'+imgPath+imgName+'" width="20" />');
});

I use the content of the li element (the answer) to get the name of the image and then I replace the content of the li element with an image tag (<img src="" />).

Upvotes: 1

Related Questions