jQuizMe 2.0 Released.

View Comments

• Hey Dear. Can some one tell me that whats wrong in following script ? it is not displaying question for me. i m fetching Question and all answer from Database but this is not showing , Help me Please..............

  // There was an extra comma at the end of multiList array.
  $( function($){
  var quizMulti = {
  multiList: [

  {
  ques: "",
  ans: "",
  ansSel: ["", "", ""],
  ansInfo : "" // answer information.
  },

  ]
  };
  options = {
  help: "Love to help others..",
  showHTML: true,
  showAns: true,
  animationType: 0,
  showWrongAns: false,
  score:true,
  title: "Vocabulary Quiz"
  };

  $("#quizArea").jQuizMe(quizMulti, options);
  });

• Hi Larry,

  It seems that when showFeedback is false, all answers are not marked so the result every time is zero percent. This issue is in the showFeedback example http://jquizme.googlecode.com/hg/releases/release%20jQuizMe%202.1.9/demo/Simple%20guide/jquizme-settings.html/

  • You're right, that's a bug. I found the problem and should post a update this weekend. Thanks for your feedback!

    • Result is not showing correct. its not working. did you fix it Sir ? Please do it and let me know thanks to you ....

      • So I can assist you better with your problem, please post your issue at https://github.com/LarryBattle/jQuizMe/issues with a code sample.

  • Fixed it with jQuizMe 2.2.1. Please test out the latest release to see if the problem was solved.
    http://code.google.com/p/jquizme/downloads/detail?name=release%20jQuizMe%202.2.1.zip#makechanges

• Is there a way to replace "Help" button with an image that says "Help" in JQuizme?

  • Most of the elements are referenced by a class or id name.

    So to replace the help button with an image, all you have to do is replace the element with an image.

    File: `jQuery-2.2.1.js`

    Line: 24

    Note: This is inside the definition of `_jQuizMeLayout`

    Change:

    $("").addClass( "q-help-btn" ),

    To:

    $("").addClass( "q-help-btn" ),

• I would like to know if it is possible to add timer to each question so if the timer reaches 0, current questions are blocked and a customizable message is displayed and the next button becomes unblocked.
  It's also be usefull if the plugin has a multilevel option(group of questions). So when we finish first level, a button to next level appears. And at the end of all levels, a summary like today's Final score is displayed.

  Good work man. Sorry for the bad english. States are far away :)
  I really love this plugin, so if I the get answers by mail, it'll be very nice from you.

  • Version 3 of jQuizMe will have this feature. `multilevel option(group of questions).`
    Not sure when it's coming out though.

    Question:
    It is possible to add timer to each question?

    Answer:
    There seems to be bug with `quizInfo.nextQuestion()`.
    This bug prevents the script from changing the question index.
    Here's example code for setting a timer for each question.

    https://github.com/LarryBattle/jQuizMe/blob/master/HowToDemos/statusUpdate-timer.html

• Hi Larry,

  How do I include a progress bar after each question ?

  • Sorry for the late response.
    You could use the option.statusUpdate().
    Something like this might work.
    var updateProgress = function(val) {
if (isNaN(val)) {
return;
}
$("#progressBar").css("width", val);
console.log("Updating the progress to %s", val);
};
var options = {
statusUpdate: function(data, $quiz) {
var percentComplete = data.hasQuit ? 1 : data.currIndex / data.total;
updateProgress(percentComplete);
}
};

• Hi Larry,

  Thanks for a great plugin. I've noticed that in my attempts using 2 options with radio input that the correct answer is always the 2nd. Is there something I am doing wrong or is there a fix to randomize the population of the options?

  Thanks!

  • Could you please open an issue at https://github.com/LarryBattle/jQuizMe/issues ?

  • I Actually fixed this by adding in (after line 590, in the changeProb function):

    $(function () {
    var parent = $("ol.q-ol");
    var divs = parent.children();
    while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
    });
    }

• Wow, JQuizMe is what I've been looking for for several years!

  The only problem for me is that it's a little hard for me to modify and style it, because I'm not JavaScript savvy. (I work primarily with PHP.)

  Here are two problems I'm trying to solve...

  1) Positioning - When I import JQuizMe into one of my web pages (using PHP's require function), it displays by default on the left side of the page and at the very bottom of the page. I partially solved the problem by wrapping JQuizMe in a div with the property position: absolute, then adding the following style:

  .quiz-el{
  margin: 0 auto;
  }

  It's now centered, and I could position it as high up the page as I want. The problem is that my footer displays above JQuizMe, instead of at the bottom of the page. I've tried every solution I can think of, including using absolute positioning to the keep the footer at the bottom of the page and giving it the style clear: both.

  Do you know why JQuizMe automatically sinks to the bottom of the page and "sucks up" everything below it?

  2) I'd love to be able to style the answers. For example, wrong answers might have a black background with white text, while correct answers might have an aqua or green background.

  I've been playing with the style sheet and can't figure out a way to do it.

  It would help if I knew the names of the various divs that make up the quiz, but I haven't been able to figure it out. The quiz is essentially divided into five sections:

  Quiz Title
  A strip with Help/Quit buttons
  Question
  Answer
  Comments

  It would be easy (for me) to style the answers if the HTML looked something like this:

  [div class="quiz-el"]
  Comments
  Quiz Title
  A strip with Help/Quit buttons
  [div class="question"]Question[/div]
  [div class="answer"]Answer[/div]
  [div class="comments"]Comments[/div]

  [/div]

  However, I can't figure out if the answer section is even a separate div. It appears that questions, answers and comments are all displayed in one common div, though they're separated by borders. I'm confused.

  Anyway, does anyone have any tips for styling JQuizMe as I've described above?

  Thans for an awesome plugin!

  • 1) Position:

    Odds are the quiz is being inserted in the wrong location in the HTML.

    Try to position an image in the right location, then replace it with quiz.

    Use Google Chrome Dev inspector or Firefox's 3d Viewer for help.

    - Sample image: https://pbs.twimg.com/profile_images/604644048/sign051.gif

    - Google Chrome Dev Tools: https://www.youtube.com/watch?v=UEj_bVVCzCA

    - Firefox 3d Viewer: https://www.youtube.com/watch?v=zqHV625EU3E

    2) Section selectors:

    Answer feedback information is controlled by the function `displayAnsResult()`.

    ".q-results" wraps the feedback section.

    Please refer to this line 604 of jQuizMe-2.1.1.js

    https://github.com/LarryBattle/jQuizMe/blob/v2.1.5/js/jQuizMe-2.1.1.js#L604

    Unfortunately the "user's answer", "wrong answer" and "why section" is all compressed into a string, then thrown on the screen.

    You can fix it by modifying jQuizMe to wrap each of them in a div or span element.

    Let me know which version you're using and I can fix it for you.

• Is there any way to add checkboxes for multiple answers ?
  Thanx in advance

  • Not at the moment. You can add a new quiz type to make it happen.
    Search for `buildQuizType` in the javascript source for examples.
    You will have to modify jQuizme*.js for this to work.
    https://github.com/LarryBattle/jQuizMe/blob/v2.2/jQuizMe-2.2.js

    Let me know if you need help.

  • Sorry for the late response, my comment got deleted somehow.

    Having a quiz type where multiple selections form the correct answer, isn't supported rigth now.

    You can add this feature in as new quiz type.

    Checkout the hashmap `buildQuizType` in jQuizMe-2.2.js on help creating a new quiz type.

    https://github.com/LarryBattle/jQuizMe/blob/v2.2/jQuizMe-2.2.js

• Hi Larry! I’m trying to put a 30 seconds time limit to each question. So far I only mange to put the timer, but it does not interact with the quiz. I need to find a way that when the timer reach the 30 second limit, the quiz auto select a wrong answer and go to the next
  question. Do you have a code for that?

  Any help will be greatly appreciated.

  • Check this out and let me know if it helps.
    jQuizMe 2.2 with timer
    https://github.com/LarryBattle/jQuizMe/blob/396bc1755349eb79f6c4737737171b1841166bf3/demo/statusUpdate-timer.html

    Timer.js
    https://github.com/LarryBattle/jQuizMe/blob/24c9f00c8a3ae2f446287e625fa2af158cd8554a/vendor/Timer/Timer.js

    • Thanks for the reply!!! The timer help me a lot, it worked great. Now I can add a few cool things to my project.

      Thanks again, keep up the good coding!