General developer forum

 
 
Picture of Jean-Michel Védrine
I need some javascript help
Group DevelopersGroup Particularly helpful Moodlers

Hello,

I managed to upgrade Adriane Boyd's drag and drop matching question to Moodle 2.3, but for Moodle 2.4 I have a big problem : as YUI2 is no more available, it stopped working.

I understand a possible solution would be to use YUI 2in3.

Another possible (and surely better) solution would be to upgrade the code to YIU3

But given I don't have any knowledge of YUI2 or YIU3 (and in fact very poor javascript knowledge blush )both of these solutions are out of my reach.

Is somebody able to help me (and all users of the ddmatch question type) ? I only need help for javascript.

The code is available here https://github.com/jmvedrine/moodle-qtype_ddmatch the relevant parts are of course renderer.php and dragdrop.js

 

 
Average of ratings: -
Picture of Darko Miletić
Re: I need some javascript help
Group DevelopersGroup Particularly helpful Moodlers

I would suggest to go for YUI 2in3. That way you basically keep your code as is and just do minor changes. Than later you can go about switching to YUI3.

The process would be as follows:

restructure your javascript to be more module like

add init procedure and pass global YUI3 object - store it inside the module.

Than replace anything YAHOO.<wathever> with Y.YUI2.<whatever>

Declare your module and list all dependencies (use frankenstyle docs for propper conventions)

http://docs.moodle.org/dev/Frankenstyle

$module = array(
    'name'      => 'qtype_ddmatch',
    'fullpath'  => '/question/type/ddmatch/module.js',
    'requires'  => array('base',
                         'node',
                         'yui2-element',
                         'yui2-button',
                         'yui2-container',
                         'yui2-event',
                         'yui2-connection',
                         'yui2-datatable',
                         'yui2-paginator'),
    'strings'   => array(),
);

$PAGE->requires->js_init_call('M.qtype_ddmatch.myobj.init',
                              null,
                              true,
                              $module);


Ditch any yui2_module call in the code since all that should be now in module definition.

etc.

 
Average of ratings: -
Picture of Jean-Michel Védrine
Re: I need some javascript help
Group DevelopersGroup Particularly helpful Moodlers

Hello Darko,

Thanks a lot for your help.

But as I said I know absolutely nothing about YUI, and the actual code is not mine (Adriane Boyd wrote it some years ago during a Google Summer of Code).

So I am afraid these minor changes are already too much for me !

 

 
Average of ratings: -
Picture of Marcus Green
Re: I need some javascript help
Group Particularly helpful Moodlers

How bad/naughty would it be to bundle a little JQuery and use that to do the drag and drop in that? Yui, the COBOL of Web 2.0.

 
Average of ratings: -
Picture of Andrew Nicols
Re: I need some javascript help
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

It wouldn't be naughty as such... but since you'd have to rewrite the code for jQuery and then include a version of jQuery which you then keep up to date, etc it would be better to spend the time rewriting in YUI3 ;)

I've been doing a lot of YUI work recently and have to come to really love it (I used to hate it and was hoping that Moodle would move to using jQuery). The YUI core team are also really working hard to improve ease of use, documentation, examples, and all of the other stuff which has historically left it with the COBOL reputation.

Andrew

 
Average of ratings: -
Picture of Alan Hess
Re: I need some javascript help
Group Particularly helpful Moodlers

Hi

The OU Drag and drop question type is great! It works on both desktop PCs AND tablets. How is it done?

I have some HTML5 code for drag and drop outside of tests but it DOESN'T work on tablets. Does it require completely separate code routines, or does someone know how it is done? The events of touch/tap and mouse click are different and it seems that dual routines would be necessary.

Regards

 

 
Average of ratings: -
Picture of Andrew Nicols
Re: I need some javascript help
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Dual routines sometimes are necessary, but often with plain drag and drop, the framework does most of the heavy lifting.

I'm not so sure about the YUI2 side of things, but the activity chooser and updated course JavaScript (both written using YUI3 libraries and found from Moodle 2.3) all work on a tablet and required next-to-no tablet-specific changes. If I recall, the only such change was to have the activity chooser resize to fit the screen on rotation events.

Andrew

 
Average of ratings: -
Picture of Andrew Nicols
Re: I need some javascript help
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hi Jean-Michel,

I've been meaning to reply to this message for the past few days, but the festive period seems to keep getting in the way.

Looking at the code you have already, I don't think that it would be too tricky to upgrade to YUI3 and I should be able to find the time to help you with it. The other option would be to keep it as YUI2 code and use 2in3, but it would be better to just upgrade to YUI3.

Once you get your head around it, YUI is a really really nice JavaScript framework.

Unfortunately, the JS documentation and guidelines on the developer wiki are rather out of date, and I really need to set aside some time to work on them.

If you're interested, then drop me a PM, and I'll send you my contact details.

Andrew

 
Average of ratings: -
Picture of Andrew Nicols
Re: I need some javascript help
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

If anyone is interested in the changes made, I've pushed them to a branch on github: https://github.com/andrewnicols/moodle-qtype_ddmatch/commits/ddmatch-yui3

I've made some changes to the renderer, and rewritten the JavaScript.

 
Average of ratings:Useful (1)
Brian
Re: I need some javascript help
Group Particularly helpful Moodlers

That's great Andrew - perfect timing!  Probably worth republishing this info elsewhere when you get time.

ps - for newbies like me, some instructions:

  1. Copy zip file to /yourmoodlesite/question/type
  2. Unzip contents of ddmatch.zip into /yourmoodlesite/question/type/ddmatch
  3. Go to http://yourmoodlesite/admin/ to complete the install. You should see messages confirming that the new question type has been installed.
 
Average of ratings: -
Picture of Andrew Nicols
Re: I need some javascript help
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Jean-Michel is aware of them and is working on integrating them into the next release of qtype_ddmatch. This was more of an FYI for those interested in the actual code side of things.

Andrew

 
Average of ratings:Useful (1)
Picture of Jean-Michel Védrine
Re: I need some javascript help
Group DevelopersGroup Particularly helpful Moodlers

Thanks Andrew,

I think all users of the drag and drop matching question type should thank you too.

My github repo https://github.com/jmvedrine/moodle-qtype_ddmatch include all Andrew's changes and my own one. You will se that I tried to make the code more in line with Moodle coding style standards, and also that I removed all non english language strings.

This is because I intend to submit this plugin to the Moodle plugin directory (I have Adriane Boyd permission to do so), and I want all languages strings management to be done using AMOS. This will permit contributors to submit their own translations (I will submit a french one myself).

This should be easy as ddmatch re-use most of the strings from the core match question type and there are very few specific strings to translate (8 or 10 if I remember well).

Of course you are all invited to test the git version and submit suggestions and bug reports.

 

 
Average of ratings: -
Picture of Joseph Rézeau
Re: I need some javascript help
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

Hi Jean-Michel (and Andrew). Just downloaded and tested the drag and drop matching question type from Jean-Michel's github. It's working fine. I am attaching a screenshot showing matching divers elements such as text, long text, image and audio. Basically it works quite smoothly and I only have a few minor remarks to make.

Tested on current Moodle 2.5 dev.

1.- When drag & dropping an element, just when the dragged element is on a target, the target box background turns dark blue, which makes the text underneath illegible (to me). That is not terribly important but I would suggest changing to a lighter color.

2.- When an element in the left column is a fairly long text, it is "squeezed" in its fixed width column. Does not look nice. This layout is made even more problematic because the quiz navigation block and question details block take up valuable horizontal space when taking the quiz.

3.- When reviewing a quiz with a drag and drop matching question, I do not see the need for displaying again the draggable elements to the right of the review screen.

4.- Something curious happens with the "flashplayer" for the audio elements. In review mode, the small flash player is replaced with the big one in the list of draggable elements (on the right)!

5.- Unfortunately we have the same problem as the Hot Potatoes match activity: if the list of elements is long and contains "large" elements such as long text, pictures, etc., it is not possible to drag an element further down than the current window, in order to reach a target sitting "out of view" to the bottom. The only way out of this blocked situation is to provisionally drop the element onto the lowest target visible at the bottom, then scroll down, pick the element, drag and drop it further down, etc. I have no idea if it's feasible to make the scroll bar automatically scroll down by holding a draggable element and "pushing" it down.

Nice job, I think all that needs to be done now is more thorough testing with as many diverse kinds of draggable elements as possible, not just plain text, and some finalizing of the display.

Joseph

 


 
Average of ratings: -
Picture of Jean-Michel Védrine
Re: I need some javascript help
Group DevelopersGroup Particularly helpful Moodlers

Hello Joseph,

Thanks a lot for your review. As you know I want to submit it to the Moodle plugin database, so I need fedback like this to improve this released version.

  1. My fault. Andrew wrote in a mail "Some of the colour choices I've used are just to demonstrate how it can be done in the stylesheets.".
    But work on issues in the tracker and also my work to prepare lessons took all my time, and I didn't had the time to look at the styles. Additionally people around me keep saying that my choice for colors sucks wink so maybe it would be better if you or somebody else propose colors ?
  2. I don't know what to do, but maybe this is clear sign that not all matching questions benefit from a drag and drop UI ?
  3. That seems sensible. But if some of the draggable elements were distractors this is a loss in information.
  4. Question for Andrew big grin
  5. I hate auto scrolling ! It seems to have a mind of its own and never do what I want, or stop when I want smile. Andrew will surely know if it's feasible or not, but maybe this is also the sign that not all match questions should be ddmatch ones ?

Please can all Moodle users interested in ddmatch question type keep testing this version. Thanks.

 

 
Average of ratings: -
Picture of Andrew Nicols
Re: I need some javascript help
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

1: I'm also not great a choosing colours - I was passing the buck I'm afraid ;)

2: This one is difficult. At present, the question side is allowed 25% of space, and the answer 75%. I'm not a style guru by any means, but it will be very difficult to please everyone here. If you have any suggestions on an improvement, they'd be good to hear.

3: This could probably be turned off - I'm not familiar enough with the quiz engine to know about this side of things really, but it should be pretty easy with CSS.

4: If you have an example of this then I can have a play. As I say, I'm not massively familiar with the question engine or quizzes in general.

5: I had a play with auto-scrolling, but it seems that if we constrain the drag/drop (as we need to do so), then the scrolling breaks. That said, I've just had an alternative idea which I'm going ot have a play with.

Andrew

4:

 
Average of ratings: -
Picture of Marcus Green
Re: I need some javascript help
Group Particularly helpful Moodlers

Many thanks to Andrew and Jean-Michel. I just tried the new code with my flag match demo question and it looks good.

 

 
Average of ratings: -