Courses and course formats

 
 
Picture of Wes Matchett
How to include javascript file in a new course format?
 

I am working on a new course format and I need to insert a <SCRIPT> tag containing some javacript.  Does moodle provide php a way to determine the path of the course format directory?  Here is an example - Im looking for the red part:

<SCRIPT src="path to course format/course_format/include_file.js"></SCRIPT>

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: How to include javascript file in a new course format?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Actually, don't do that at all.

In Moodle 1.9, use the require_js function.

In Moodle 2.0, user the $PAGE->requires->js_init_call method.

See Development:JavaScript_guidelines.

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

Thank you!  This is exactly what I was looking for.

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

I found a very nice post at David Mudrak's blog about many Moodle developement issues.

Here is an excerpt about javascript includes from the April 27, 2010 post that I found very helpful ...

Moodle core does a lot of work for you behind the scene with including YUI libraries and their dependencies in correct location of HTML produced by your code. The most straightforward way to include JavaScript on your page is to define the code in the file module.js in your plugin directory. To avoid collisions of global variables and functions, all your code is supposed to be wrapped in a namespace. Since 2.0, we put all Moodle JavaScript code into a global M object and plugins are expected to use their own M.plugintype_pluginname namespace. For example if you write an activity module called foobar, all your JavaScript functions should be defined in M.mod_foobar namespace.

To include your code at the page and to initialize it from PHP, use $PAGE->requires->js_init_call(), providing the name of the initial JavaScript function as the first parameter. This initialization function must accept YUI instance object as the first parameter which we call Y, as is common in YUI 3. Once you have YUI instance, you can do whatever magic this library offers to you, including the possibility to load additional YUI modules with Y.use(). The ‘Hello world’ example of using YUI in Moodle 2.0 could look like this:

Let us say you are working on FooBar activity module. In your PHP script, for example /mod/foobar/view.php, add a line

$PAGE->requires->js_init_call('M.mod_foobar.init');

Then create the file /mod/foobar/module.js with the following contents

/**
* @namespace
*/
M.mod_foobar = M.mod_foobar || {};

/**
* This function is initialized from PHP
*
* @param {Object} Y YUI instance
*/
M.mod_foobar.init = function(Y) {
alert('Hello world');
}

Or, instead of just displaying the alert, to modify the current HTML code (for example to add some elements via JavaScript or to remove some non-JS support code) just use

M.mod_foobar.init = function(Y) {
Y.one('#mycustomholder').set('innerHTML', 'Hello world');
}

See YUI 3 documentation for more great examples. You may also find this blog post useful

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

My current status...

I duplicated the 'Topics' course format for testing purposes and placed it in 'moodle/course/format/sectional' and edited the various items to allow it to be recognized as a new course format. I added

$PAGE->requires->js_init_call('M.mod_sectional.init');

to the end of format.php

and I created module.js in the format directory containing this code:

M.mod_sectional = {
Y : null,
transaction : [],
init: function(Y) {
this.Y = Y;
alert('sectional course format initialized');
}
}

The format loads fine except I don't see the alert message.  I see the call of init() at the end of the page source:

M.mod_sectional.init(Y);

and the browser error console thows this error:

M.mod_sectional is undefined

So the problem is that module.js code is not linked into the page.

What am I missing?

 
Average of ratings: -
Gareth J Barnard
Re: How to include javascript file in a new course format?
Group DevelopersGroup Particularly helpful Moodlers

Dear Wes,

You need to tell Moodle to include the javascript file before the 'init', so something like:

$PAGE->requires->js('/course/format/sectional/module.js');

Cheers,

Gareth

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: How to include javascript file in a new course format?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Acutally, you don't.

If you use js_init_call, then it will automatically include your JavaScript.

The problem here is that you are making a course format, not an activity module, so the code needs to be

$PAGE->requires->js_init_call('M.format_sectional.init');

with the corresponding change in the JS.

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: How to include javascript file in a new course format?
Group DevelopersGroup Particularly helpful Moodlers

Interesting Tim smile - I never knew that - you learn something new every day smile

Cheers,

Gareth

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

Well, it's a step in the right direction. There is now attempt at including my module.js.  Just after the footer section this code is present:

M.yui.add_module({"format_sectional":{"name":"format_sectional",
"fullpath":"http:\/\/localhost\/moodle\/lib\/javascript.php?
file=%2Fcourse%2Fformat%2Fsectional%2Fmodule.js&rev=160","requires":[]}});

and the call at the end has changed to:

Y.use('format_sectional', function(Y) { M.format_sectional.init(Y); });

but I still get this error:

M.format_sectional is undefined

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

Actually, when I wake up and change both format.php AND module.js it works!  On the previous test I only changed 'mod' to 'format' in the js_init_call of format.php.

Thanks for the help!

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

I have reached another roadblock...

The javascript is working nicely, but I need to access the YUI StyleSheet module.  I am trying to do so by using

section_style = Y.StyleSheet('sectional_styles');

but I am getting the error:

Y.StyleSheet is not a function

Is there another requires that I need to put in format.php to include StyleSheet?  I tried $PAGE->requires->css(); but that threw an error stating it couldn't be called outside of head, and from what I can tell course formats begin in the body, so that's not an option.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: How to include javascript file in a new course format?
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

Now you need to look into the extra, optional arguments you can pass to js_init_call. The last one is a $module array, which lets you tell the system what things your JavaScript relies on. For example, which YUI modules you need. See the PHP docs: http://phpdocs.moodle.org/HEAD/core/lib/page_requirements_manager.html#js_init_call

Or not. That is fairly useless.

Have a look at an example of the kind of array you can pass there. For example https://github.com/moodle/moodle/blob/master/mod/quiz/locallib.php#L1264

 
Average of ratings: -
Picture of Wes Matchett
Re: How to include javascript file in a new course format?
 

Thanks again.  This was the last piece, my format is working properly now. The key was finding the correct YUI module to pass in requires, which is quite easy using The YUI Configurator. Here is the entire code that links in javascript:

$module = array(
'name'     => 'format_sectional',
'fullpath' => '/course/format/sectional/module.js',
'requires' => array('stylesheet')
);
$PAGE->requires->js_init_call('M.format_sectional.init', array($sectional_map), false, $module);

I have one more feature to implement and the course format will be finished.

 
Average of ratings: -
Picture of Victor Martin
Re: How to include javascript file in a new course format?
 

Hi, can someone tell me how I can use the function js_init_call in Moodle 1.9 version? Not used $PAGE in 1.9 version.

 

Thanks

 
Average of ratings: -
Gareth J Barnard
Re: How to include javascript file in a new course format?
Group DevelopersGroup Particularly helpful Moodlers

Dear Victor,

As it does not exist in Moodle 1.9, I use standard JavaScript includes, e.g.

<script type="text/javascript" src="<?php echo $CFG->wwwroot ?>/course/format/topcoll/lib_min.js"></script>

and then call a function:

<script type="text/javascript">
//<![CDATA[
topcoll_init('<?php echo $CFG->wwwroot ?>',
'<?php echo preg_replace("/[^A-Za-z0-9]/", "", $SITE->shortname) ?>',
'<?php echo $course->id ?>',
null); <!-- Expiring Cookie Initialisation - replace 'null' with your chosen duration. -->
//]]>
</script>
 

Cheers,

Gareth

 
Average of ratings:Useful (1)
Picture of Victor Martin
Re: How to include javascript file in a new course format?
 

Thanks Gareth, I figured this would be that way. Just wanted to know if there was any function in this version of moodle. Thank you very much.

 
Average of ratings: -
Gareth J Barnard
Re: How to include javascript file in a new course format?
Group DevelopersGroup Particularly helpful Moodlers

Dear Victor,

No problem smile.  I think that Moodle forums needs a 'Like' button smile.

Cheers,

Gareth

 
Average of ratings: -
Picture of shailesh jai
Re: How to include javascript file in a new course format?
 

Hello, 

if suppose I want to call javascript function like this ...

html_writer::tag('div','yourtext here', array('id' => 'quiz-timer1', 'onload' => 'show()'));

is this currect ? if yes then where i should keep my js file so that this file can execute ....  

thanks 

 
Average of ratings: -