Re: [elearning tech & dev] Adapting "ungraded quiz with feedback" script to allow multiple questions on same document ?

[Philip Hutchison]

something like this?

https://gist.github.com/pipwerks/5597275

On Thu, May 16, 2013 at 2:52 PM, Julius <j.a.ro...@gmail.com> wrote:

Hi,

I like Philip's script for an ungraded Javascript Quiz with feedback as it is quick to set up :
http://pipwerks.com/2008/03/29/creating-simple-ungraded-quiz-questions-with-feedback-using-html-and-javascript/

But is there any way to adapt it so that several questions can be asked on the same HTML document ?

Currently the script is based on an id which is attributed to the question.
I would like to make it based on class. I could adapt the CSS, but I'm not familiar to MooTools.

Here's the concerned function :

//Initialize the quiz
function initQuiz(){
    var q = $("question");                        //Get the 'question' DL (using MooTools $ function)
    q.onclick = function(e){                    //Use event delegation to handle any clicks on the DL and child items
        var me = getEventTarget(e);                //Shortcut
        if(me.nodeName === "DT"){                //If the clicked item is a DT element,
            toggleFeedback(me);                    //Invoke the toggleFeedback function
        }
    }
}

Thanks.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Julius]

I wrote something wrong in my previous post, as the script based on
MooTools is still necessary.
Just the initialisation function is now using jQuery in the new code
that Philip posted.

Here's some improvement making possible to hide the <dd> containing
the answer when the user clicks again on the chosen line.

jQuery(function(){
jQuery("dl.question").click(function(event){
if(event.target.nodeName === "DT"){
if (jQuery("dl.active")[0] === jQuery(event.target).parent("dl")[0])
{
jQuery(".active").removeClass("active");
} else {
jQuery(".active").removeClass("active");
jQuery(event.target).parent("dl").addClass("active");
jQuery(event.target).next("dd").addClass("active");
}
}
});

Also, I found that in the CSS style, for
".question dt:before {"
one should remove "position:absolute;"

There is no reason for it and it makes the arrow icons and it caused
problem if the quiz was placed in a scrollable <div>, as the small
arrow icons where not moving together with the <dt> elements when the
quizz was scrolled down.


On 17 mai, 10:32, Julius <j.a.rouil...@gmail.com> wrote:
> Yes, exactly what I was looking for and your code even exceeds my
> expectations as my page is already importing jQuery.
> This avoids me having to load MooTools. Thanks a lot!
>
> Good news: your code is also compatible with older versions of jQuery like
> the 1.2.6.
>
> Yesterday, I had a hard time making jQuery and Mootools work together.
> For those using the Mootools version of your applet, I however could solve
> the compatibility issue by adding jQuery.noConflict(); a the beginning of
> the jQuery applet that I was using, which was jFlow 1.0 :
> (function($) {
>   jQuery.noConflict();

>
> Le jeudi 16 mai 2013 23:52:47 UTC+2, Julius a écrit :
>
>
>
>
>
> > Hi,
>
> > I like Philip's script for an ungraded Javascript Quiz with feedback as it
> > is quick to set up :
>

> >http://pipwerks.com/2008/03/29/creating-simple-ungraded-quiz-question...

>
> > But is there any way to adapt it so that several questions can be asked on
> > the same HTML document ?
>
> > Currently the script is based on an id which is attributed to the question.
> > I would like to make it based on class. I could adapt the CSS, but I'm not
> > familiar to MooTools.
>
> > Here's the concerned function :
>
> > //Initialize the quiz
> > function initQuiz(){
> >     var q = $("question");                        //Get the 'question' DL
> > (using MooTools $ function)
> >     q.onclick = function(e){                    //Use event delegation to
> > handle any clicks on the DL and child items
> >         var me = getEventTarget(e);                //Shortcut
> >         if(me.nodeName === "DT"){                //If the clicked item is
> > a DT element,
> >             toggleFeedback(me);                    //Invoke the
> > toggleFeedback function
> >         }
> >     }
> > }
>

> > Thanks.- Masquer le texte des messages précédents -
>
> - Afficher le texte des messages précédents -

[Philip Hutchison]

No, that's incorrect: the code in the GitHub gist does not use MooTools at all.

However if you're trying to use the old code WITH the new code, there might still be dependencies.

As for the CSS, you can style it however you like. I was just playing around -- the new version doesn't use any images for the icons, and makes use of some fun CSS styling. The important part is the use of display:none on the feedback elements.