Developers' Forum

UI blockly plugin

UI blockly plugin

by Ruben Cancho -
Number of replies: 6

Hi Richard,

I'm developing a new UI plugin that integrates Blockly Google library. I read the forum thread where Sergi Garcia exposed the idea and it made me click, as I'm a ICT teacher in secondary education where we use block programming with our students (for example, Scratch and App Inventor).

I followed the guidelines you gave him, implementing the UI plugin API and integrating blockly as a AMD module. Here is the fork with the basic implementation and a screenshot:


My idea is to test it with my students the next course. Internally I save in the textArea the blockly state and the code generated in Python. I'm still figuring out some features, like localization and configuring the available toolbox blocks and categories by question. 

For localization I'm using a templateParams option, but I'd like to be able to configure it only in the prototype, not in each question. Is this possible?

I would like to know if you would be interested to have it integrated in upstream or as a subplugin, and if so what should be improved. Anyway, thank you for developing such a great plugin!

Regards,

Ruben.

In reply to Ruben Cancho

Re: UI blockly plugin

by Richard Lobb -

Hi Ruben

Wow, that's impressive. Congratulations. Unfortunately, though, it doesn't seem to run on my machine as it stands. I cloned your github repo onto my machine and simply replaced my version of coderunner with yours. Was that what you were expecting me to do? When I clear the cache, I get the following JavaScript errors:

Uncaught ReferenceError: goog is not defined
    at /moodle/lib/requirejs.php/1595836404/core/first.js:192
/moodle/lib/requirejs.php/1595836404/media_videojs/loader.js:192 Uncaught ReferenceError: goog is not defined
    at /moodle/lib/requirejs.php/1595836404/media_videojs/loader.js:192
require.min.js:5 Uncaught Error: No define call for media_videojs/loader
http://requirejs.org/docs/errors.html#nodefine
    at makeError (require.min.js:5)
    at Object.completeLoad (require.min.js:5)
    at HTMLScriptElement.onScriptLoad (require.min.js:5)
/moodle/lib/requirejs.php/1595836404/message_popup/notification_popover_controller.js:192 Uncaught ReferenceError: goog is not defined
    at /moodle/lib/requirejs.php/1595836404/message_popup/notification_popover_controller.js:192
require.min.js:5 Uncaught Error: No define call for message_popup/notification_popover_controller
http://requirejs.org/docs/errors.html#nodefine
    at makeError (require.min.js:5)
    at Object.completeLoad (require.min.js:5)
    at HTMLScriptElement.onScriptLoad (require.min.js:5)
/moodle/lib/requirejs.php/1595836404/theme_boost/drawer.js:192 Uncaught ReferenceError: goog is not defined
    at /moodle/lib/requirejs.php/1595836404/theme_boost/drawer.js:192
require.min.js:5 Uncaught Error: No define call for theme_boost/drawer
http://requirejs.org/docs/errors.html#nodefine
    at makeError (require.min.js:5)
    at Object.completeLoad (require.min.js:5)
    at HTMLScriptElement.onScriptLoad (require.min.js:5)
/moodle/lib/requirejs.php/1595836404/theme_boost/loader.js:192 Uncaught ReferenceError: goog is not defined
    at /moodle/lib/requirejs.php/1595836404/theme_boost/loader.js:192
require.min.js:5 Uncaught Error: No define call for theme_boost/loader
http://requirejs.org/docs/errors.html#nodefine
    at makeError (require.min.js:5)
    at Object.completeLoad (require.min.js:5)Finally congratulations on what is certainly a very interesting development effort.
    at HTMLScriptElement.onScriptLoad (require.min.js:5)

and a similar list on every page I load.

Copying your question prototype from the samples folder and trying to create a question of that type also doesn't go well. 

It seems that Google's closure library is required, but I've never used that and I'm not sure how it's meant to be loaded or built. Can you advise what I should do next, please?

To answer your other questions ...

Yes, you should be able to put template parameters into the prototype. The complete set of template parameters for a question is obtained by merging the specific question's parameters with those of the prototype.

I am certainly interested in knowing more about your extension, and playing with it a bit myself. I'm a bit nervous about integrating it into the base CodeRunner plugin, however, as it's yet another thing to be documented, maintained, tested on each new Moodle release, etc. I'm a bit reluctant to get into that, since I'm almost certainly not going to be using blockly myself. However, I have a colleague in our department who's very involved in school computer education, so I'd want to get his opinions on it.

My preference would be to have a separate sub-plugin, distributed via github and maintained independently by you. I'm not sure how to make that work, however. Bits of your subplugin need to go in various different places within coderunner (amd/src, amd/build, samples and language/*). To make that work there needs to be proper sub-plugin API, including an install capability. Again, things might start to get complicated.

I'm also a bit nervous about the implications of having another large JavaScript library running within the Moodle infrastructure. 

But let me mull over the issues later. I'd first like to get it working so I have a better feel for what it can do and how useful and maintainable it would be.

Thank you for such an interesting development.

Richard

In reply to Richard Lobb

Re: UI blockly plugin

by Ruben Cancho -

Hi Richard,

Unfortunately I should have checked more the code before posting here. I've made more changes recently to fix some issues, so maybe if you do a 'git pull' now those errors will hopefully get fixed (crossing fingers here).

Yes, I created a blockly prototype that I import in the CR_PROTOTYPE category and then I create questions selecting the blockly type question type. I'm also using Moodle 3.9 and latest Google Chrome if that helps.

About the params parameter in the loadUi API I read from your documentation:

"The params parameter is a record that allows additional parameters to be passed in, such as those from the question's templateParams field and, in the case of the Ace UI, the 'lang' (language) that the editor is editing."

I checked a little the code and I can see that "params" passed to UI constructor is filled with data-params textArea attribute, but I don't follow where the merge with the prototype is done. Maybe templateParams only inherit from prototype value in the question code?

I understand your nervousness and I'm ok with the subplugin road, no worries. I want to test it more during this course and get it battle tested before any step further. I will also try not to get you more nervous with silly javascript errors ;)

thank you for your interest and support!

Ruben

In reply to Ruben Cancho

Re: UI blockly plugin

by Richard Lobb -

Hi Ruben

Sorry, but I still seem to have the same problems with lots of JavaScript errors like the list I gave earlier on every page. The errors occur as soon as I purge all caches after switching to your version of the code.

I thought I might try to regenerate the build contents from src but when I run grunt, the approved Moodle checker and minimiser, I get an impressive 11,000 odd errors - clearly blockly isn't written to grunt specs! But what I did notice is that there's a build/blockly_coderunner.min.js and a build/block_coderunner.min.js.map but no corresponding blockly_coderunner.js file in the src directory. However, I can't see how that could cause the problems I'm having.

It could be that the problem occurs due to some setting in my development system, but that seems a bit unlikely. Have you tried installing your version of CodeRunner in a clean new install of Moodle?

On other matters ...

Many thanks for drawing my attention to the Moodle subplugin capability - I had never heard of it before! 

Merging of template parameters is done in the PHP code, server side, since it involves both the current question and the prototype, and also requires Twig processing for randomisation. That means that when you add or edit template parameters within the author editing form you have to save the question (.e.g "Save and continue editing") to see the effects. I agree this is a bit clumsy, but it's difficult to avoid.

Richard



In reply to Richard Lobb

Re: UI blockly plugin

by Ruben Cancho -

Hi Richard,

I don't really know what could be happening... I'm sending to your email at UC some teacher credentials to a Moodle site where I installed the fork yesterday. I didn't have any problems installing it from git, and changing the coderunner folder with the new one. My coderunner version was older and forced an upgrade, I also have Javascript cache disabled as a got some problems upgrading from 3.8 to 3.9.

About the blockly_coderunner file is an old file I didn't remember to delete in build, now is done. You are right that blockly isn't grunt friendly, I must do a "grunt --force" to get the files build and I close my eyes to not see those red alerts flashing :)

Ruben

In reply to Ruben Cancho

Re: UI blockly plugin

by Richard Lobb -

Yay! I have it working on my machine :-) 

Turning off Javascript caching was the main thing. But I also had to change the url computation around line 34 in ui_blockly.js to be compatible with my development machine, where URLs begin http://localhost/moodle/...

In order to get a clean grunt run, I also copied toolbox.xml into the blockly folder in build and changed ui_blockly.js to load it from there. I then removed the blockly folder from src.

I don't know much about blockly so I wasn't able to do much. But clearly the basic functionality works and it looks like great fun, Ruben. 

I think the subplugin idea is the way to go, but I haven't had time to look into whether that can be made to work with question types and what I have to do to support it. Let us know about any further developments. I suggest you email me directly with minor tweaks, bug fixes etc but post back here if you have actual developments suitable for others to use.

Thanks again for an interesting and fun development.

In reply to Richard Lobb

Re: UI blockly plugin

by Richard Lobb -
A brief update: I tried breaking the user interfaces out into a set of subplugins but it didn't work. The documentation here, which says they're supported only for activity modules, html editors, local plugins and admin tools, is in fact correct. Code lines 60/61 in component.php provide the proof:

    /** @var array list plugin types that support subplugins, do not add more here unless absolutely necessary */
    protected static $supportsubplugins = array('mod', 'editor', 'tool', 'local');

So, sadly, if looks like subplugins are not the way to go here, at least not for now.