0

I tried slickquiz on one of my projects, and added images and all on every questions.

However, I would like to ask for help if you can point me on how to delay the image before it goes to the next question.

The behavior is for every click on "Check Answer" it automatically switches over to the next one, since the Id did changed already.

What I wanted is to make the image change only once the next question is loaded.

The full code is located here: http://bin.cakephp.org/saved/87152

Live sample: http://aacenter.com/surveys/index/1

Code snippet that does the change of images:

if (qPos == 'question0') {
                    //console.log('search: ' + qPos + ', found.');
                    $('#progressbar').progressbar('option', 'value', 10);
                    $('.questionImage #qImgSrc').attr('src', '/themed/aac-theme/img/quizzes/s' + surveyId + 'q02.jpg');
                }
                else if (qPos == 'question1') {
                    //onsole.log('search: ' + qPos + ', found.');
                    $('#progressbar').progressbar('option', 'value', 20);
                    $('.questionImage #qImgSrc').attr('src', '/themed/aac-theme/img/quizzes/s' + surveyId + 'q03.jpg');
                }

The code is working fine, but it's just way advance to change the image.

gtgaxiola
  • 9,241
  • 5
  • 42
  • 64
Louie Miranda
  • 1,071
  • 1
  • 20
  • 36

2 Answers2

0

Was able to work on a fix. Instead of relying on a behavior on every click. Since, slickquiz did load the < li > prior and just show and hide. Initially, I must load the proper image as well.

The fix was pretty simple.

questionHTML.append('<div class="questionImage"><img id="qImgSrc" src="/themed/aac-theme/img/quizzes/s' +surveyId+ 'q0' + count + '.jpg" border="0" width="300" height="120" alt="" />' + '</div>');

For anyone needing this code, it has been modified to have a jquery ui progress bar as well.

Enjoy!

Louie Miranda
  • 1,071
  • 1
  • 20
  • 36
-1
'questionHTML.append('' + '');'
Lucifer
  • 29,392
  • 25
  • 90
  • 143