https://docs.moodle.org/dev/api.php?action=feedcontributions&feedformat=atom&user=Tim%2BHuntMoodleDocs - User contributions [en]2026-06-07T23:14:47ZUser contributionsMediaWiki 1.43.5https://docs.moodle.org/dev/index.php?title=Template:Migrated&diff=63589Template:Migrated2022-08-15T13:31:22Z<p>Tim+Hunt: Fix missing / in URLs</p>
<hr />
<div>{| class="alert alert-info"<br />
|style="padding: 0.7em 0.5em 0.5em;" | '''Important:''' <br />
<br />
This content of this page has been updated and migrated to the new [https://moodledev.io/{{{newDocId}}} Moodle Developer Resources]. The information contained on the page should no longer be seen up-to-date.<br />
<br />
Why not [https://moodledev.io/{{{newDocId}}} view this page on the new site] and [https://moodledev.io/general/documentation/contributing help us to migrate more content to the new site]!<br />
<br />
|}<br />
<br />
<includeonly>[[Category:DevDocs Migration]]</includeonly><br />
<noinclude><br />
This template will categorise any documentation which has been moved into to new Developer Resources site. [[:Category:DevDocs Migration]].<br />
<br />
This template takes the following parameters:<br />
* newDocId: [string] - For example /docs/apis/access<br />
<br />
Please note that this is a work-in-progress and we are currently assessing options. There is nothing to announce yet, but we want to be able to track which pages have been moved into our sample sites so that if we adopt one of these options we can track more easily what we have migrated.<br />
<br />
At the moment this template deliberately has no content. This will be added when we have something to announce and we start to formally use any new system that we adopt.<br />
</noinclude></div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Moodle_4.0_developer_update&diff=62386Moodle 4.0 developer update2022-05-16T16:58:35Z<p>Tim+Hunt: /* Question type plugins */</p>
<hr />
<div>This page highlights the important changes that are coming in Moodle 4.0 for developers. Including how the UX improvements impact custom themes, relevant API changes, and what you can do as developer to prepare for the 4.0 release.<br />
== Navigation changes ==<br />
The core Navigation API has been left mostly untouched. The callbacks to all navigation callbacks remain unchanged and will be called as part of the regular 'navigation' and 'settingsnav' initialisation. Some new core classes have been created and exist within a new namespace 'core/navigation' and serve as conduit to rearrange, cherry-pick existing navigation nodes from the navigation/settingsnav trees and display within the respective navigation type. As such, it is highly recommended to provide unique keys for custom navigation nodes as this helps in the cherry-picking / rearranging process within the new classes.<br />
=== Primary navigation ===<br />
The primary navigation(the navbar) apart from the existing content will now display links to the Dashboard, My Courses, Site Admin and Course search, by default. You can still add items to the navbar via the 'custom menu' option. This will be displayed within the 'More' menu. We have transitioned the menus to be rendered via templates - refer user_menu.mustache. The lang menu has been moved to reside within the user menu.<br />
==== Customising the primary navigation ====<br />
Not yet implemented but we are looking at allowing the full addition and removal of any of the primary navigation tabs in the boost theme config file.<br />
=== Secondary navigation ===<br />
The main content area shows tabs for secondary navigation with a maximum of 5 items being rendered in this ‘more’ menu. A new UI component has been created to render menus like this. Files:<br />
/lib/templates/moremenu.mustache<br />
==== Adding items to the navigation ====<br />
The secondary navigation pulls information mainly from the settings navigation node from each context. Any plugin that implements the existing navigation hooks will have their items added to the secondary navigation.<br />
Existing navigation hooks:<br />
* {module}_extend_navigation<br />
* {local}_extend_navigation<br />
* {report}_report_extend_navigation<br />
* {plugin}_extend_navigation_course<br />
* {plugin}_extend_navigation_category_settings<br />
==== Changing the order of tabs ====<br />
Apart from the previously mentioned functions, you can also create a custom secondary class as mentioned earlier. This will automatically be picked by getter and used to render the secondary nav within the activity. E.g. mod_assign/local/views/secondary. Note: This is currently only possible on an activity and block level.<br />
=== Tertiary navigation ===<br />
We've moved action buttons to the top of the page. We would encourage you to do the same.<br />
If you have any buttons on an activity page that go to another page, or open a form (or similar), then we encourage you to move them from the body of your activity page to the top. All of the core activities have been updated to follow this pattern. Please take a look to see how you can format your activity in a similar fashion. There is no API here. You are welcome to create the buttons and display them as you wish in this top area.<br />
=== New API functions ===<br />
==== Page API ====<br />
* Magic getters to fetch the primary and secondary navs and the primary output.<br />
* The secondarynav magic getter also checks whether a custom secondary class has been defined within the module's local\views directory. Use this if you want to deviate from the standard secondary nav structure/order.<br />
<br />
* set_secondarynav - Force override the secondary navigation class<br />
<br />
* set_secondary_navigation - Sets the ‘_hassecondarynavigation’ and optionally the ‘_hastablistsecondarynavigation’ to indicate whether a page should render the secondary navigation, and if the secondary navigation should be rendered and behave with a tablist ARIA role (as opposed to its default which is being rendered with a menubar ARIA role).<br />
==== Navigationlib ====<br />
* set_show_in_secondary_navigation - whether or not a node should be displayed in the secondary nav. Accepts a single boolean argument<br />
* set_force_into_more_menu- whether or not to force a node into the 'More' menu. Accepts a single boolean argument<br />
==== The activity header class ====<br />
There is a new activity header class that handles the display of information common to activities. 3rd party activities are not required to explicitly output this information as part of rendering individual pages.<br />
<br />
The common information that are currently handled by the class are:<br />
* title<br />
* description<br />
* completion information<br />
<br />
<br />
As part of the update it was required that the initial information to be displayed by the class be toggable at a theme and layout level. Taking this into account the following theme level configurable exists:<br />
* activityheaderconfig => An array that currently only enforces 'notitle' but can be expanded in the future NOTE: Boost has this set as true by default 'options'<br />
The following layout level options that can be defined:<br />
* noactivityheader - to remove the header in this specific layout.<br />
* activityheader - An array that enforces the following options:<br />
** notitle<br />
** nocompletion<br />
** nodescription<br />
The class has a page level getter which you can use to fetch the current version of the class. The base state is initialised within the constructor with the completion information only fetched when data is exported for the template.<br />
<br />
The class has setters for the following variables which can be leveraged to modify the header for a particular page in the format set_{variable_name}:<br />
* hidecompletion<br />
* description<br />
* title<br />
Alternately, bulk operations can also be done by passing the above variables in an array to 'set_attrs' which in turn calls the setters.<blockquote>'''Note: Any updates to the activityheader needs to be performed before the call to $OUTPUT->header'''</blockquote><br />
===== Theme updates =====<br />
With the changes in boost to incorporate the primary and secondary navigation, 3rd party themes would need to account for the following in their templates:<br />
* To leverage the activity_header, it's data needs to be exported and included into the base template :<syntaxhighlight lang="html"><br />
{{#headercontent}}<br />
{{> core/activity_header}}<br />
{{#headercontent}}<br />
</syntaxhighlight>** headercontent being the array element that contains the exported activity_header data<br />
* It is recommended to transition towards the secondary/tertiary navigation hierarchy to reduce user cognitive load and with a logical separation of components<br />
** Secondary navigation can be added to the templates by following the example https://github.com/moodle/moodle/blob/master/theme/boost/templates/columns2.mustache#L64-L68 This leverages the secondary navigation class to generate it's content.<br />
* Flat navigation classes have been marked for deprecation. Themes that leverage the flat_navigation will need to make the following changes in their plugins in order to use it<br />
** Account for the additional changes [[Moodle 4.0 developer update#Theme changes]]<br />
** Indicate that they do not implement secondary navigation via the page's "set_secondary_navigation" function. It is recommended to set this within the root layout file e.g. columns2<br />
** Initialise the flat navigation by introducing the following in the root layout file(if not existent)<syntaxhighlight lang="php"><br />
$nav = $PAGE->flatnav;<br />
$templatecontext['firstcollectionlabel'] = $nav->get_collectionlabel();<br />
</syntaxhighlight><br />
* In order to reintroduce the settings cog in the templates, you can introduce the following: <syntaxhighlight><br />
<div id="region-main-settings-menu" class="d-print-none {{#hasblocks}}has-blocks{{/hasblocks}}"><br />
<div> {{{ output.region_main_settings_menu }}} </div> <br />
</div><br />
</syntaxhighlight><br />
===== Accessibility notes =====<br />
The jump to ‘maincontent’ div is now rendered within the activity header when within an activity context<br />
== Component library ==<br />
Each Moodle installation now ships with a Moodle User Interface (UI) Component library, a documentation system used to describe all the Bootstrap components and the custom Moodle components. The component Library is a helper tool for developers when creating user interfaces, a testing tool for theme developers and a documentation tool for core developers. The ultimate goal of having a component library is to encourage developers to create consistent user interfaces to improve Moodle’s overall user experience.<br />
<br />
The library contains pages with documentation about User Interface components. It contains details on how to use the component, what variations are available and the JavaScript events / options are associated with the component.<br />
<br />
When writing on these pages it is possible to render core mustache templates using some custom syntax like this:<br />
<nowiki>{{< mustache template="core/notification_error" >}}</nowiki><br />
<nowiki>{{< /mustache >}}</nowiki><br />
You can also call core JavaScript or use HTML examples where the html code and the rendered result are visible in the Component Library. For more info visit the [http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/moodle-templates/ Moodle templates] page or the [http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/moodle-javascript/ Moodle JavaScript] page.<br />
<br />
Each page in the library uses the current css from the default theme in your Moodle installation, if you have multiple themes installed and enabled the setting "Allow theme changes on url", the component library will have a theme selector option.<br />
<br />
A hosted version of the Component Library can be found here. http://componentlibrary.moodle.com<br />
=== Enabling the Component Library ===<br />
Component library pages are written in the markdown language. These pages need to be compiled to HTML pages before the Component Library is visible. To compile the pages the server running Moodle needs to have the [[Javascript Modules#Install%20NVM%20and%20Node|JavaScript developer tools installed]] (nodeJs and Grunt)<br />
<br />
If your server meets all requirements you can enable the library running<br />
$ npm install<br />
$ grunt componentlibrary<br />
Further installation instructions can be found in the Component Library itself.<br />
=== Documenting new UI Components ===<br />
There are no set rules for adding new pages in the component library yet. These rules will need to be written and adopted in the integration process for Moodle code.<br />
<br />
As a guideline for making this rules consideration are:<br />
<br />
The component library is not about single use components, for example the Moodle grade book (a huge component with many custom features). Or about very common components like buttons, these are already covered by the Bootstrap section of the component library.<br />
<br />
New features should be build keeping in mind the UI part needs to be customisable and if possible (and making sense) reusable. And example would be the new page drawers that we are introducing for the Navigation project. Or the custom primary navigation menus where overflowing items are pushed into a More section.<br />
== Theme changes ==<br />
=== Edit switch ===<br />
On theme boost the “Turn editing on” and “Customise this page” buttons have been replaced by an edit switch in the top navbar. Theme Classic will keep using the old buttons. Child themes can choose to use the edit switch if the theme config.php is using this variable<br />
$THEME->haseditswitch = true;<br />
The languague menu, which used to be rendered in place of the custom menu has moved to the user dropdown when the user is logged in. If not logged in it will be placed next to the search / notification / messaging icon in the top navbar.<br />
=== Login page ===<br />
The login page has been redesigned and allows the admin to configure a background image for the login page only in the theme settings page. This change is available in both Boost and Classic. The login page still has all the features with an improved layout. <br />
=== The page footer ===<br />
In large screens, the page footer button is only visible when clicking a help button at the bottom right of the screen.<br />
=== User initials as profile picture placeholder ===<br />
If users do not upload a profile picture the user initials are displayed on a rounded gray background as a placeholder picture in the top navbar or any other page using a placeholder image. This change will be available in both Boost and Classic. <br />
<br />
With the introduction of this placeholder image the full username will no longer be displayed in the top navbar.<br />
=== Removal of back to top link ===<br />
The "back to top" link will be removed for theme boost since the new course index reduced the dependence on page scrolling. Also, the new footer is positioned where this component used to be.<br />
=== Styling changes ===<br />
By default rounded edges will be used for UI components, for the page header and main content area the borders will be removed. <br />
=== New layout page ===<br />
Theme boost now uses the drawers.php layout for the course index and blocks.<br />
== Question bank changes ==<br />
There was a big project to deliver [[Question bank improvements for Moodle 4.0]] which added a new plugin type for adding features to the question banks, tracking the version history for each question as it is edited (question table has been split into <code>question</code>, <code>question_versions</code> and <code>question_bank_entries</code>), and tracking where each question is going to be used, with new tables <code>question_references</code> and <code>question_set_references</code>. This work was done in Epic MDL-70329 if you want to track down the details of any of the core changes.<br />
=== Question type plugins ===<br />
Amazingly, we (Safat and colleagues at Catalyst AU) managed to implement this without breaking most question type plugins, with one important exception if your questions do shuffling like multiple choice does. See MDL-74752. There is a new method called update_attempt_state_date_from_old_version which you may need to implement.<br />
<br />
However, the changes to the question bank, and the other Moodle 4.0 changes, probably broke the Behat tests for your plugin. To help with fixing that, MDL-74130 adds navigation to key question type pages (Preview and Edit for a question, and standard question bank pages like the bank itself, import and export) which should let you fix your test efficiently, and in a way that will work in all Moodle versions since 3.9.<br />
<br />
The 'most' in the first paragraph here is becuase more advance question types may require more effort to fix. (For example qtype_combined which creates multi-part qusetions like the core qtype_multianswer; or qtype_pmatch or qtype_stack, which store additional data - questions tests - alongside the question itseld. How should that work with versionning?) But, if you have not done weird things like that, you are probably safe. If you find anything else that causes problems, please list it here.<br />
<br />
The same thing should apply to question behaviour and question import/export format plugings: no significant changes required (probably just fixing the Behat tests because of the navigation changes).<br />
=== New plugin type: qbank plugins ===<br />
This is not something that will cause problems for people upgrading from 3.x. Rather, it is an exciting possibility you can explore once you have survived process of upgrading to 4.0. There is a whole new plugin type which you can create to add new features to the question bank. For example extra columns, new actions and bulk actions, and so on. See [[Question_bank_plugins]].<br />
=== Activities that use questions ===<br />
The probable bad news is if you have an activity module which uses questions. So far, the only activity which has been fixed is mod_quiz in Moodle core, so we don't yet have a good picture of what fixes will be necessary in other activities. Work is about to start fixing [https://github.com/studentquiz/moodle-mod_studentquiz mod_studentquiz], so watching that should give more clues. As we do that, we will try to update this section of this page. Other help writing the information required here would also be greatly appreciated.<br />
== The course format system ==<br />
Most of the logic for rendering and editing a course has been moved to a new subsystem called courseformat. The subsystem is located in "course/format" folder so it includes all the format plugins inside. The methods and modules which are distributed between the course and the course/format folders are now rearranged or refactored to be aligned with the current Moodle coding style.<br />
=== Mandatory renderer in course formats ===<br />
Now format plugins renderer is not optional anymore. Legacy formats without a renderer will get a deprecation message but it will continue working however, they should create a new renderer as soon as possible. The section-based format can do it by extending the provided core_courseformat\output\section_renderer class which includes all the necessary methods.<br />
=== New format base class ===<br />
The old base_format class (which all plugins extend) is now renamed as core_courseformat\base. The new class provides all the functionally of the previous base_format but it has been refactored to be used as a centralized source of truth for the course rendering. Legacy formats should extend the new class to avoid the deprecation message.<br />
<br />
Now, the plugin format class provides information such as:<br />
* If the page is displaying a single or multiple section<br />
* Give access to other related format objects like the modinfo, the course record, maximum number of sections...<br />
* If the format is compatible with features like course index, reactive components, ajax...<br />
* Other format specifics like the page title, the default section name, default blocks...<br />
<br />
<br />
The format instance is now the main object output components will use to render a course (see next section for more information).<br />
=== New course output classes and mustache files ===<br />
Traditionally, section-based course formats uses print_single_section_page and print_multiple_section_page to render the course content. In Moodle 4.0 most of the course rendering methods are migrated to output components and mustache templates. The old methods will get deprecation messages if they use the old renderer methods.<br />
<br />
This is an example of a format rendering a course:<syntaxhighlight lang="php-brief"><br />
// Get the course format instance.<br />
$format = course_get_format($course);<br />
<br />
// Get the specific format renderer.<br />
$renderer = $format->get_renderer($PAGE);<br />
<br />
if (!empty($displaysection)) {<br />
// Setup the format instance to display a single section.<br />
$format->set_section_number($displaysection);<br />
}<br />
<br />
// Create the ouptut instance and render it.<br />
$outputclass = $format->get_output_classname('content');<br />
$widget = new $outputclass($format);<br />
<br />
echo $renderer->render($widget);<br />
</syntaxhighlight>Format plugins are free to use its own output classes to render a course, or they could override the existing output classes by providing their own implementation. For example, the default output for "content" (as in the previous example) is "core_courseformat\output\local\|content", however, if the plugin has a "format_XXX\output\courseformat\content" class, the $format->class the get_output_class will return the overridden one.<br />
Another important update on course rendering is that now all course structure is rendered using mustache templates instead of the original html_writer methods. Now themes are able to override the course format by providing alternative versions of the mustache files. All core course templates are located in "course/format/templates".<br />
<br />
All course format output classes implements the new named_templatable interface, which allows the class to define its own template path using the "get_template_name" method. This new interface in combination with [[Templates#Blocks|mustache blocks]] allows the format plugins to provide alternative templates to render the course.<br />
<br />
All the new output classes and a guide on how to migrate the current third-party plugins will be available soon.<br />
=== Course editor javascript modules and frontend components ===<br />
The majority of the javascript logic related to the course editing is replaced by AMD modules. Because this is a major change in the way courses are edited and rendered, by default format plugins will continue using the previous YUI modules for now. However, formats can start using the new libraries overriding the "$format->supports_components()" method.<br />
<br />
Some Moodle 4.0 new features are only available for courses using the new editor library:<br />
* Edit the course via the course index<br />
* Creating sections without reloading the course page<br />
* The new move section/activity modal<br />
* Native browser drag&drop implementation<br />
The new course editor uses a component-based reactive pattern to keep track of the course changes. The pattern highlights are:<br />
* The main AMD module "core_crouseformat\courseeditor" maintains a data structure called state.<br />
* Each UI element is implemented as a Component that observes the course state data and reacts to any data change<br />
* When any reactive component needs to modify the course, it asks the course editor to execute a mutation. Mutations encapsulate all web services calls and alter the course state data.<br />
<br />
<br />
The reactive library documentation, as well as the format plugin migration guide, will be available soon.<br />
=== Other course related 4.0 changes ===<br />
Two new web services have been added:<br />
* core_courseformat_get_state: user by the new javascript course editor to get the current course state data (containing the list of sections, activities, and other course-related data)<br />
* core_courseformat_update_course: to alter the current course content. Each call returns the parts of the course state altered by the action<br />
== Behat changes ==<br />
=== New steps ===<br />
Moodle 4.0 introduces some new behat steps.<br />
<br />
Sometimes you want to create a bulk number of activities. In that case you can use:<syntaxhighlight lang="gherkin"><br />
:count :entitytype exist with the following data:<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
Given 100 "mod_lti > tool types" exist with the following data:<br />
|name |Test tool [count] |<br />
|description |Example description [count] |<br />
|baseurl |https://www.example.com/tool[count]|<br />
</syntaxhighlight><br />
<br />
<br />
Dynamic (AJAX) tabs is a new feature contributed to Moodle 4.0 by the Workplace team (MDL-71943). You can use the following step to navigate between the tabs.<syntaxhighlight lang="gherkin"><br />
And I click on the "tab title" dynamic tab<br />
</syntaxhighlight><br />
<br />
<br />
To make sure that edit mode is (or is not) available on the current page, the following steps can be used.<syntaxhighlight lang="gherkin"><br />
And edit mode should be available on the current page<br />
And edit mode should not be available on the current page<br />
</syntaxhighlight><br />
<br />
<br />
There are new aliases for the existing steps <code>I turn editing mode on</code> and <code>I turn editing mode off</code>.<syntaxhighlight lang="gherkin"><br />
And I switch editing mode on<br />
And I switch editing mode off<br />
</syntaxhighlight><br />
<br />
<br />
In addition to the existing step to go to a course with editing mode on, we now have the following step to do the same but with editing mode being off.<syntaxhighlight lang="gherkin"><br />
And I am on "course full name" course homepage with editing mode off<br />
</syntaxhighlight><br />
<br />
<br />
The following step is similar to the old <code>following "link string" should download between "min bytes" and "max bytes" bytes</code> step, with more flexibility.<syntaxhighlight lang="gherkin"><br />
And following "element string" "element type" in the "container string" "container type" should download between "min bytes" and "max bytes" bytes<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And following "Download" "link" in the "Starter" "table_row" should download between "0" and "5000" bytes<br />
</syntaxhighlight><br />
<br />
<br />
The following step can be used to hover the mouse over the trigger area.<syntaxhighlight lang="gherkin"><br />
And I hover over the "element string" "element type" in the "container string" "container type"<br />
</syntaxhighlight><br />
<br />
<br />
The following step enables an installed plugin.<syntaxhighlight lang="gherkin"><br />
And I enable "plugin name" "plugin type" plugin<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And I enable "course_summary" "block" plugin<br />
</syntaxhighlight><br />
<br />
<br />
The following is a special variation of 'I click on "<page name>" "link" in the "page" "region"'. It first checks to see if we are on the given page via the breadcrumb. If not we then attempt to follow the link name given.<syntaxhighlight lang="gherkin"><br />
And I follow the breadcrumb "page name"<br />
</syntaxhighlight><br />
<br />
<br />
You can use the following step to ensure a node is active in the navbar.<syntaxhighlight lang="gherkin"><br />
And I should see "Node" is active in navigation<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And I should see "My courses" is active in navigation<br />
</syntaxhighlight><br />
<br />
<br />
The following step can be used to navigate to a given node in the primary navigation.<syntaxhighlight lang="gherkin"><br />
And I select "Node" from primary navigation<br />
</syntaxhighlight><br />
<br />
<br />
The following steps are to check whether an item exists in the user menu or not.<syntaxhighlight lang="gherkin"><br />
And "item text" "selector type" should exist in the user menu<br />
And "item text" "selector type" should not exist in the user menu<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And "Language" "link" should exist in the user menu<br />
</syntaxhighlight><br />
<br />
<br />
The following steps are to check if a submenu of the user menu is shown, and if an item exists or does not exist in a given user submenu.<syntaxhighlight lang="gherkin"><br />
And I should see "submenu name" user submenu<br />
And "item text" "selector type" should exist in the "submenu name" user submenu<br />
And "item text" "selector type" should not exist in the "submenu name" user submenu<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
When I follow "Language" in the user menu<br />
Then I should see "Language selector" user submenu<br />
And "English &lrm;(en)&lrm;" "link" should exist in the "Language selector" user submenu<br />
And "English (pirate) &lrm;(en_ar)&lrm;" "link" should not exist in the "Language selector" user submenu<br />
</syntaxhighlight><br />
<br />
<br />
To add enrolment methods to courses you can use the following new step. The data that you provide in the next lines are used to fill the enrolment method form.<syntaxhighlight lang="gherkin"><br />
And I add "enrolment method" in "course identifier" with:<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
When I add "Self enrolment" enrolment method in "Course 1" with:<br />
| Custom instance name | Test student enrolment |<br />
| Enrolment key | moodle_rules |<br />
| Use group enrolment keys | Yes |<br />
</syntaxhighlight><br />
<br />
<br />
There are 3 new steps specific to the calendar component. These steps can be used to hover over a day in the mini-calendar or the full calendar.<syntaxhighlight lang="gherkin"><br />
And I hover over day "day of month" of this month in the full calendar page<br />
And I hover over day "day of month" of this month in the mini-calendar block<br />
And I hover over today in the mini-calendar block<br />
</syntaxhighlight><br />
<br />
<br />
Some new steps are added to question bank to be able to add comment to questions, verify the existence of a comment, and deleting comments form questions. Please note that the steps for adding comments only write the comment text in the comment field. You still need to click on the "Add comment" button to save the comment.<syntaxhighlight lang="gherkin"><br />
And I add "comment text" comment to question<br />
And I add "comment text" comment to question preview<br />
And I delete "comment text" comment from question<br />
And I delete "comment text" comment from question preview<br />
And I should see "number of comments" on the comments column<br />
And I click "number of comments" on the row on the comments column<br />
<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And I navigate to "Question bank" in current page administration<br />
And I should see "0" on the comments column<br />
And I click "0" on the row on the comments column<br />
And I add "test comment 01" comment to question<br />
And I click on "Add comment" "button" in the ".modal-dialog" "css_element"<br />
And I click on "Close" "button" in the ".modal-dialog" "css_element"<br />
And I should see "1" on the comments column<br />
And I click "1" on the row on the comments column<br />
And I delete "test comment 01" comment from question<br />
</syntaxhighlight><br />
<br />
<br />
Similar to the steps for comments, the following steps are to verify the number of a question's usage and to click on it in order to open the question usage modal.<syntaxhighlight lang="gherkin"><br />
And I should see "usage count" on the usage column<br />
And I click "usage count" on the usage column<br />
</syntaxhighlight><br />
<br />
<br />
The following new steps are related to bulk actions in the question bank UI.<syntaxhighlight lang="gherkin"><br />
And I click on question bulk action "action"<br />
And I should see question bulk action "action"<br />
And I should not see question bulk action "action"<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And I click on "First question" "checkbox"<br />
And I click on "Second question" "checkbox"<br />
And I click on "With selected" "button"<br />
And I should see question bulk action "deleteselected"<br />
And I click on question bulk action "deleteselected"<br />
And I click on "Delete" "button" in the "Confirm" "dialogue"<br />
</syntaxhighlight><br />
<br />
<br />
[https://docs.moodle.org/en/Report_builder Report builder] is a new feature contributed to Moodle 4.0 by the Workplace team. The following new step is added to Moodle 4.0 to select an action from the action menu in the list of custom reports table.<syntaxhighlight lang="gherkin"><br />
And I press "action" action in the "report name" report row<br />
</syntaxhighlight><br />
<br />
<br />
There's another step related to the report builder to set a column's aggregation in the report editor.<syntaxhighlight lang="gherkin"><br />
And I set the "column title" column aggregation to "aggregation method"<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And I set the "First name" column aggregation to "Comma separated values"<br />
</syntaxhighlight><br />
<br />
<br />
The following step needs to be used in scenarios that involve testing BigBlueButton. For this to work, you need to have a [https://github.com/moodlehq/bigbluebutton_mock BigBlueButton Mock API Server] and set <code>TEST_MOD_BIGBLUEBUTTONBN_MOCK_SERVER</code> to point to that in config.php.<syntaxhighlight lang="gherkin"><br />
And a BigBlueButton mock server is configured<br />
</syntaxhighlight><br />
<br />
<br />
The following step replicates receiving a callback from the BigBlueButton server indicating the recordings for meetings are ready for viewing.<syntaxhighlight lang="gherkin"><br />
And the BigBlueButtonBN server has sent recording ready notifications<br />
</syntaxhighlight><br />
<br />
<br />
The following steps are specific to the lesson activity. Note that in 4.0, some links (such as the "edit" and the "grade essays" links) are replaced by buttons, so you need to update your old steps with the new ones.<syntaxhighlight lang="gherkin"><br />
And I edit the lesson<br />
</syntaxhighlight>A new step is added to be used in lesson activities to edit them. This step navigates the user to the lesson edit page.<br />
<syntaxhighlight lang="gherkin"><br />
And I grade lesson essays<br />
</syntaxhighlight>It's a new step to go to the "Grade essays" page of the lesson we are currently in.<br />
<syntaxhighlight lang="gherkin"><br />
And I select edit type "edit type"<br />
</syntaxhighlight>Select the lesson edit type when we are in the the lesson's edit page. "edit type" can either be "Collapsed" or "Expanded".<br />
<br />
<br />
The following new step can be used to navigate to the exports page in the course gradebook and select the specified export type from the grade exports navigation selector.<syntaxhighlight lang="gherkin"><br />
And I navigate to "export option" export page in the course gradebook<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And I navigate to "XML file" export page in the course gradebook<br />
</syntaxhighlight><br />
<br />
<br />
Similarly, there's a new step to navigate to the imports page in the course gradebook and select the specified import type from the grade imports navigation selector.<syntaxhighlight lang="gherkin"><br />
And I navigate to "import option" import page in the course gradebook<br />
</syntaxhighlight><br />
=== Boost steps ===<br />
In addition to the steps listed in the previous section, there are also some Boost specific steps coming with Moodle 4.0. These steps only work in Boost or Boost child themes, so you need to make sure they are not used in scenarios that may be run by non-Boost themes.<br />
<br />
<br />
The following step checks whether a node is active in the secondary navigation.<syntaxhighlight lang="gherkin"><br />
And I should see :name is active in secondary navigation<br />
</syntaxhighlight><br />
<br />
<br />
The Boost theme shows the language selector menu in the primary navigation when not logged in, and within the user menu when logged in. The following steps are to check if the primary navigation includes the language selector menu.<syntaxhighlight lang="gherkin"><br />
And language selector menu should exist in the navbar<br />
And language selector menu should not exist in the navbar<br />
</syntaxhighlight><br />
<br />
<br />
And the following steps can be used to check whether an item exists in the language selector menu in the Boost theme.<syntaxhighlight lang="gherkin"><br />
And "item text" "selector type" should exist in the language selector menu<br />
And "item text" "selector type" should not exist in the language selector menu<br />
</syntaxhighlight>For example:<syntaxhighlight lang="gherkin"><br />
And "English &lrm;(en)&lrm;" "link" should exist in the language selector menu<br />
</syntaxhighlight><br />
=== Modified steps ===<br />
The step <code>I change the (window|viewport) size to "size"</code> now supports 2 new values for the size argument. The size argument now accepts <code>mobile</code> and <code>tablet</code> values in addition to <code>small</code>, <code>medium</code> and <code>large</code>.<br />
=== Removed steps ===<br />
Some behat steps are removed or replaced with new steps.<br />
<br />
<br />
As a result of some design changes, hidden or restricted activities are no longer dimmed. Therefore the step<syntaxhighlight lang="gherkin"><br />
And "Activity or resource name" activity should be dimmed<br />
</syntaxhighlight>is now removed.<br />
Depending on what you were using that step for, you may be able to use these steps:<syntaxhighlight lang="gherkin"><br />
And "Label name" label should be hidden<br />
</syntaxhighlight><syntaxhighlight lang="gherkin"><br />
And "Activity or resource name" activity should be hidden<br />
</syntaxhighlight><syntaxhighlight lang="gherkin"><br />
And I should see "Activity or resource name"<br />
And "Activity or resource name" "link" should not exist in the "region-main" "region"<br />
</syntaxhighlight><br />
=== Other things to consider ===<br />
To make behat tests more readable and easy to maintain, it is recommended to use the most direct steps to get what the test needs. It is highly recommended to use<br />
I am on the "Activity name" "[modname] activity" page <br />
or<br />
I am on the "Activity name" "[modname] activity" page logged in as "user"<br />
instead of navigating to the activity via<br />
I am on "Course" course homepage<br />
I follow "Activity name"<br />
Now that [https://docs.moodle.org/dev/Prototypes#Course_creation_improvements Course index] is integrated these behat steps<br />
I am on "Course" course homepage<br />
I follow "Activity name"<br />
will fail using Boost theme.<br />
<br />
The reason for it is that the drawer used in Boost is hiding the course index. So when the test is trying to follow an "Activity name" link, it finds two different links:<br />
* one in the course index<br />
* another one in the course main content.<br />
But the first one, the one in the course index, is hidden by the drawer, and the test fails.<br />
<br />
However the recommended behat steps<br />
I am on the "Activity name" "[modname] activity" page <br />
or<br />
I am on the "Activity name" "[modname] activity" page logged in as "user"<br />
Old behat steps that may now fail can be updated to the new steps.<br />
For example:<br />
And I am on the "Test assignment name" "assign activity" page logged in as teacher1<br />
instead of:<br />
When I log in as "teacher1"<br />
And I am on "Course" course homepage<br />
And I follow "Test assignment name"<br />
Or for settings, instead of:<br />
<syntaxhighlight lang="gherkin">And I follow "Test choice name"<br />
And I navigate to "Edit settings" in current page administration</syntaxhighlight><br />
Use:<br />
<syntaxhighlight lang="gherkin">And I am on the "Test choice name" "choice activity editing" page</syntaxhighlight><br />
<br />
<br />
There are also similar stream-lined navigation steps for accessing question bank pages. See MDL-74130.<br />
== Other ==<br />
=== Core plugins review ===<br />
A few plugins from core Moodle LMS which are no longer or hardly used have been removed and, if appropriate, added to the Moodle plugins directory.<br />
<br />
More information about this project, the list of plugins to be removed and the process to follow for keeping them before upgrading to 4.0 can be found in the [[Core plugins review]] page.<br />
=== Core blocks cleanup ===<br />
In the "Add a block" menu, the list of blocks was really long. A few changes have been done to reduce this list.<br />
<br />
More information about this project can be found in the [[Add a block cleanup]] page.<br />
=== Site admin presets plugin ===<br />
The third-party plugin [https://moodle.org/plugins/block_admin_presets Admin presets], created by David Monllaó and maintained by developers from [https://pimenko.com/ Pimenko] has been adapted and integrated into Moodle 4.0. It stores settings and plugins status (enabled/disabled) in what's called "presets" to let admins quickly switch between different configurations.<br />
<br />
More information about this project can be found in the [[Site admin presets|Site admin presets plugin]] page.<br />
=== JavaScript browser support changes ===<br />
From Moodle 4.0, Internet Explorer is no longer supported. See MDL-73915 and MDLSITE-6109 for further information on this change.<br />
<br />
This change means that changes built on 4.0 onwards (including the master branch) will be different to older versions of Moodle.<br />
<br />
For plugin developers supporting multiple versions of Moodle using a single plugin version, the compiled javascript files are backwards compatible and will _work_ on all supported versions, however if you run the `grunt` command on multiple versions you will see unbuilt changes. Running grunt on all versions of Moodle is not necessary and this check can be safely disabled for Moodle versions 3.9 - 4.0, as long as only at least you run `grunt` against at least one version of Moodle.<br />
<br />
If you need to support Internet Explorer and do not wish to fork your plugin for Moodle 4.0 onwards, then it is recommended that you run `grunt` on an older version of Moodle.<br />
=== The course index element ===<br />
The new course index feature can be themed using a set of scss variables. Use them to change the look and feel instead of adding custom css<br />
/theme/boost/scss/moodle/courseindex.scss<br />
With the introduction of the course index component, the previous and next links shown underneath each activity are no longer needed and they will be removed.<br />
=== Activity icons ===<br />
The icons used for activities have been redesigned and updated for all core moodle activities.<br />
<br />
When viewing the new icons in a file manager, for example for the quiz activity, you will see a simple black monochrome icon with a transparent background.<br />
<br />
On the course page, or in the activity chooser, the icon will display as a white icon on a coloured background. Styling of the icons on the coursepage is controlled by the css in theme/boost/scss/moodle/icons.scss.<br />
<br />
The background colour for activity icons is set using a new variable in function [modname]_supports(). The quiz activity is of type assessment, so in function quiz_supports() there is a new line defining the purpose:<br />
case FEATURE_MOD_PURPOSE: return MOD_PURPOSE_ASSESSMENT;<br />
Available purposes are:<br />
* MOD_PURPOSE_COMMUNICATION<br />
* MOD_PURPOSE_ASSESSMENT<br />
* MOD_PURPOSE_COLLABORATION<br />
* MOD_PURPOSE_CONTENT<br />
* MOD_PURPOSE_ADMINISTRATION<br />
* MOD_PURPOSE_INTERFACE<br />
The background colours linked to these purposes are set in theme/boost/scss/moodle/variables.scss<br />
$activity-icon-colors: map-merge(<br />
(<br />
"administration": #5d63f6,<br />
"assessment": #eb66a2,<br />
"collaboration": #f7634d,<br />
"communication": #11a676,<br />
"content": #399be2,<br />
"interface": #a378ff<br />
),<br />
$activity-icon-colors<br />
);<br />
If activity plugins do not define FEATURE_MOD_PURPOSE the activity icon will be rendered against a light grey background. There is no requirement to define the purpose of activity plugins, it will only affect the icon styling.<br />
<br />
Plugins implementing the variable FEATURE_MOD_PURPOSE are only supported on Moodle 4.0 and newer.<br />
<br />
Customising the activity icon can be done in an alternative way. For example using the styles.css in mod/[pluginname/styles.css<br />
<br />
In the example below the activity plugin developer chooses to keep the coloured icon for the activity and render it as large as the coloured background on the core activities<br />
.modicon_subcourse.activityiconcontainer {<br />
background-color: transparent;<br />
padding: 0;<br />
}<br />
<br />
.modicon_subcourse.activityiconcontainer img {<br />
width: 50px;<br />
height: 50px;<br />
}<br />
To customize all icon colours use this scss array and add it to the ‘Raw initial SCSS’ in the theme Boost advanced settings page. The complete array of icon background colours can be overridden using the ‘Raw initial SCSS’ in the theme settings page. The example below changes the colours of each activity type.<br />
$activity-icon-colors: (<br />
"administration": #5D63F6,<br />
"assessment": #11A676,<br />
"collaboration": #EB66A2,<br />
"communication": #F7634D,<br />
"content": #399BE2,<br />
"interface": #A378FF<br />
)<br />
== I'm a developer, what do I need to know? ==<br />
This section is a quick checklist of the areas in this document that you should consult when updating your plugin.<br />
=== Modules ===<br />
If you are a module developer (activity / resources) then you need to review the following updates and changes:<br />
* If using settings, reformat to work with the secondary navigation. We have significantly changed the way that settings are shown. Settings added to the course and activity administration branch of the navigation are now by default shown in the secondary navigation. You will most likely find them in the more section of the secondary navigation. Please avoid creating settings in containers (a parent navigation node with children). These settings will still be shown, but this goes against the pattern that we are trying to establish for navigation around the site. If you have a lot of settings, consider creating a specific page to handle your additional settings.<br />
** The order of the items in the secondary navigation may not be to your liking. This can be changed. See [[Moodle_4.0_developer_update#Changing_the_order_of_tabs|changing the order of tabs]]<br />
* Update my behat tests to use new steps for site navigation. See [[Moodle_4.0_developer_update#Behat_changes|new behat steps]].<br />
* Update my module to use the new activity_header API. See [[Moodle_4.0_developer_update#The_activity_header_class|the activity header]].<br />
* Update my pages to make it work with the general format of the tertiary navigation. See [[Moodle_4.0_developer_update#Tertiary_navigation|the tertiary navigation]].<br />
* Update my activity icon to use the API and set a purpose. See [[Moodle_4.0_developer_update#Activity_icons|activity icons]].<br />
=== Themes ===<br />
If you are a theme developer then you may want to consider the following:<br />
* Take a look at the [[Moodle_4.0_developer_update#Navigation_changes|new navigation]] and decide if you want to incorporate this into your theme.<br />
** A new layout ([[Moodle_4.0_developer_update#New_layout_page|drawers]])<br />
** An [[Moodle_4.0_developer_update#Edit_switch|edit switch]]<br />
** The [[Moodle_4.0_developer_update#The_course_index_element|course index]]<br />
* Use of the flat nav<br />
* New Site administration page and layout<br />
* Course settings and how they are displayed<br />
=== Course format ===<br />
There have been a lot of changes made to the course format. Most in the process of moving the course format away from using the old rendering system and towards templates.<br />
We recommend the following sections be read carefully:<br />
# [[Moodle_4.0_developer_update#The_course_format_system|The course format]]. There have been a lot of deprecations and reading this section is critical in understanding the changes made.<br />
# Consider moving the rendering of your content over to the [[Templates|template system]].<br />
=== Other plugins ===<br />
# Are you adding settings? See the [[Moodle_4.0_developer_update#Adding_items_to_the_navigation|secondary nav]] for adding items to this navigation bar.<br />
# Have a look at [[Moodle_4.0_developer_update#Secondary_navigation|secondary]] and [[Moodle_4.0_developer_update#Tertiary_navigation|tertiary]] navigation changes in general if you have a plugin that has multiple pages to navigate around.<br />
# Do you have behat tests? Check the new [[Moodle_4.0_developer_update#Behat_changes|behat changes]].</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Templates&diff=61887Templates2022-03-22T11:16:23Z<p>Tim+Hunt: Info about how to do help icons.</p>
<hr />
<div>{{Moodle 2.9}}<br />
<br />
Templates in Moodle are used for rendering the output such as HTML or email messages bodies. Templates are defined as a text with placeholder tags. Placeholder tags are replaced with actual values during the rendering. Templates can be rendered both on the server side in PHP as well as on the client side in JavaScript. Themes can override the default templates. Moodle uses [https://mustache.github.io/mustache.5.html Mustache template system].<br />
== Simple example ==<br />
Given the template is defined as:<br />
<syntaxhighlight lang="html+handlebars"><br />
<div class="alert alert-info"><br />
<strong>Hello {{name}}!</strong> Your grade is: <strong>{{grade}}</strong><br />
</div><br />
</syntaxhighlight><br />
And the values for the placeholder tags <var>name</var> and <var>grade</var> are provided as a JSON object, referred to as ''rendering context'' (note the ''context'' here has nothing to do with Moodle [[Roles#Context|permission contexts]]. In Mustache, the term basically represents the data passed to the template).<br />
<syntaxhighlight lang="json"><br />
{<br />
"name": "Bobby",<br />
"grade": 10<br />
}<br />
</syntaxhighlight><br />
Then the rendered result will look like:<br />
<div class="alert alert-info"><strong>Hello Bobby!</strong> Your grade is: <strong>10</strong></div><br />
The following page provides information about the Mustache templates syntax and how to use them in Moodle.<br />
== Syntax ==<br />
Mustache tags are made of two opening and closing curly braces. Their shape looks like a [https://en.wikipedia.org/wiki/Moustache moustache], thence the name.<br />
=== Variables ===<br />
<syntaxhighlight lang="html+handlebars"><br />
{{name}}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="json"><br />
{<br />
"name": "Bobby"<br />
}<br />
</syntaxhighlight><br />
The value of the key <var>name</var> will be searched for in the current rendering context (and any parent contexts) and when a value is found, the entire tag will be replaced by the value (HTML escaped).<br />
=== Raw unescaped variable ===<br />
All variables are HTML escaped by default. If you want to render raw unescaped HTML, use the triple mustache:<br />
<syntaxhighlight lang="html+handlebars"><br />
{{{description}}}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="json"><br />
{<br />
"description": "<h1>Hello!</h1><p>In this course you will learn about ...</p>"<br />
}<br />
</syntaxhighlight><br />
Beware of the security implications of outputting raw HTML and make sure that the value of the variable has been processed by <tt>format_text()</tt> or another adequate way.<br />
=== Sections ===<br />
Sections render blocks of text zero, one or more times, depending on the value of the key in the current context. The opening tag has a hash (pound) sign and the closing tag has a slash, followed by the key.<br />
<br />
'''False values and empty lists'''<br />
<br />
When the key is false or an empty list, the HTML between the opening and closing tag will not be displayed. This can be effectively used to conditionally control the rendering of a section.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#hasdata}}<br />
This will not be shown if 'hasdata' is empty.<br />
{{/hasdata}}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="json"><br />
{<br />
"hasdata": false<br />
}<br />
</syntaxhighlight><br />
'''Non-empty lists'''<br />
<br />
When the value is a non-empty list, the text in the block will be displayed once for each item in the list. The context of the block will be set to the current item for each iteration. In this way we can loop over collections.<br />
<syntaxhighlight lang="html+handlebars"><br />
<ul><br />
{{#grades}}<br />
<li><br />
<em>{{course}}</em> - {{grade}}<br />
</li><br />
{{/grades}}<br />
</ul><br />
<br />
</syntaxhighlight><br />
<syntaxhighlight lang="json"><br />
{<br />
"grades": [<br />
{<br />
"course": "Arithmetic",<br />
"grade": "8/10"<br />
},<br />
{<br />
"course": "Geometry",<br />
"grade": "10/10"<br />
}<br />
]<br />
}<br />
</syntaxhighlight><br />
'''Lambdas'''<br />
<br />
When the value is a callable, it will be invoked and returned value used as the section value. In Moodle plugins, this can be used to call the <tt>core_renderer</tt> methods via the <tt>output</tt> context variable:<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#output.should_display_navbar_logo}}<br />
<img src="{{output.get_compact_logo_url}}"><br />
{{/output.should_display_navbar_logo}}<br />
</syntaxhighlight><br />
'''Inverted sections'''<br />
<br />
Inverted sections will be rendered if the key does not exist, is false, or is an empty list. An inverted section begins with a caret (hat) and ends with a slash.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#hasgrade}}<br />
Your grade is: <strong>{{grade}}</strong><br />
{{/hasgrade}}<br />
<br />
{{^hasgrade}}<br />
Your work has not been graded yet.<br />
{{/hasgrade}}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="json"><br />
{<br />
"hasgrade": false,<br />
"grade": null<br />
}<br />
</syntaxhighlight><br />
=== Comments ===<br />
Comments begin with an exclamation mark. The whole section is ignored. Comments are used for boilerplate documentation. They can also be used to avoid having extra break-lines in the generated output.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{!<br />
This is a comment and will not be present in the rendered result.<br />
}}<br />
</syntaxhighlight><br />
=== Partials ===<br />
Templates can include other templates using the partial tag. Partials begin with a greater than sign. Partials are rendered at runtime and allow to split complex templates into smaller, potentially re-usable units. Moodle core provides with many templates that can be included this way.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{! Show the loading icon. }}<br />
<div class="p-5"><br />
{{> core/loading }}<br />
</div><br />
</syntaxhighlight><br />
The included template uses the same rendering context as its parent template.<br />
=== Blocks ===<br />
{{Moodle 3.0}}<br />
Mustache template system can be extended via so called [https://github.com/bobthecow/mustache.php/wiki/Pragmas Mustache pragmas]. Pragmas are non-standard extensions to the Mustache spec. Moodle 3.0 and higher has [https://github.com/bobthecow/mustache.php/wiki/BLOCKS-pragma BLOCKS pragma] installed and enabled.<br />
<br />
The extension allows you to define a parent template with replaceable blocks. Blocks look like sections that use dollar sign in the opening tag. The following parent template defines two blocks <var>heading</var> and <var>content</var><br />
<syntaxhighlight lang="html+handlebars"><br />
{{!<br />
@template tool_demo/section<br />
}}<br />
<section><br />
<h1><br />
{{$heading}} Default section heading {{/heading}}<br />
</h1><br />
<div><br />
{{$content}} Default section content {{/content}}<br />
</div><br />
</section><br />
</syntaxhighlight><br />
Particular child templates can now extend / inherit from this parent template and override the default block values.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{!<br />
@template tool_demo/latestnews<br />
}}<br />
{{< tool_demo/section }}<br />
{{$heading}} Latest news {{/heading}}<br />
{{$content}} Today I learned how to use blocks in Mustache! {{/content}}<br />
{{/ tool_demo/section}}<br />
</syntaxhighlight><br />
Blocks are particularly useful for building a library of re-usable components.<br />
== Helpers ==<br />
Moodle providers several Mustache helpers. Helpers tags look like sections eventually containing zero or more parameters.<br />
=== str ===<br />
The <tt>{{#str}}</tt> is a string helper for loading text strings from language packs. It effectively represents Mustache variant of <code>get_string()</code> calls.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#str}} helloworld, mod_greeting {{/str}}<br />
</syntaxhighlight><br />
The first two parameters are the string identifier and the component name. The optional third parameter defines the value for the string's <code>$a</code> placeholder. Literals as well as variable tags are allowed to define the value.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#str}} backto, core, Moodle.org {{/str}}<br />
<br />
{{#str}} backto, core, {{name}} {{/str}}<br />
</syntaxhighlight><br />
For strings that accept non-scalar placeholders, see the following section.<br />
<br />
Note: if you want to do a '''help icon''', and wondering "where is the helper for that?" then acutally, it is not a helper. You need to use <code><nowiki>{{>core/help_icon}}</nowiki></code> as a partial.<br />
=== quote ===<br />
The <tt>{{#quote}}</tt> is used to quote non-scalar <tt>{{#str}}</tt> arguments.<br />
<br />
Some strings accept complex non-scalar data structures passed as the value of the <code>$a</code> placeholder. You can use a JSON object syntax in that case:<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#str}} counteditems, core, { "count": "42", "items": "courses" } {{/str}}<br />
</syntaxhighlight><br />
If you wanted to use the context values instead of literal values, you might intuitively use something like this:<br />
<syntaxhighlight lang="html+handlebars"><br />
{{! DO NOT DO THIS !}}<br />
{{#str}} counteditems, core, { "count": {{count}}, "items": {{itemname}} } {{/str}}<br />
</syntaxhighlight><br />
There is a potential problem though. If the variable tag <var>itemname</var> evaluates to a string containing double quotes, it will break the JSON syntax. We need to escape certain characters potentially appearing in the variable tags. For this, we use the <tt>{{#quote}}</tt> helper.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#str}} counteditems, core, { "count": {{count}}, "items": {{#quote}} {{itemname}} {{/quote}} } {{/str}}<br />
</syntaxhighlight><br />
=== pix ===<br />
The <tt>{{#pix}}</tt> is a icon picture helper for generating pix icon tags.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#pix}} t/edit, core, Edit this section {{/pix}}<br />
</syntaxhighlight><br />
The first two parameters are the icon identifier and the component name. The rest is the alt text for the icon.<br />
<br />
See [[Using images in a theme]] and [[Moodle_icons]] for some background information about pix icons in Moodle.<br />
=== userdate ===<br />
{{Moodle 3.3}}<br />
The <tt>{{#userdate}}</tt> helper will format UNIX timestamps into a given human readable date format while using the user's timezone settings configured (if any) in Moodle. The helper will accept hardcoded values, context variables, or other helpers. <br />
<br />
It is recommended to use the string helper to get one of the core Moodle formats.<br />
<syntaxhighlight lang="json"><br />
{<br />
"time": 1628871929<br />
}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="html+handlebars"><br />
{{#userdate}} {{time}}, {{#str}} strftimedate, core_langconfig {{/str}} {{/userdate}}<br />
</syntaxhighlight><br />
This will ask the Moodle server for the string "strftimedate" and will use the value (which in this case is "%d %B %Y" in case of English) to format the user date. So the resulting formatted timestamp from the userdate helper would be like "13 August 2021".<br />
=== shortentext ===<br />
{{Moodle 3.3}}<br />
The <tt>{{#shortentext}} </tt> helper can be used to shorten a large amount of text to a specified length and will append a trailing ellipsis to signify that the text has been shortened. <br />
<br />
The algorithm will attempt to preserve words while shortening to text. Words, for the purposes of the helper, are considered to be groups of consecutive characters broken by a space or, in the case of a multi-byte character, after the completion of the multi-byte character (rather than in the middle of the character).<br />
<br />
It will also attempt to preserve HTML in the text by keeping the opening and closing tags. Only text within the tags will be considered when calculating how much should be truncated to reach the desired length.<br />
<br />
The helper takes two comma separated arguments. The first is the desired length and the second is the text to be shortened. Both can be provided as context variables.<br />
<syntaxhighlight lang="json"><br />
{<br />
"description": "<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia pretium nulla gravida interdum.</em></p>"<br />
}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="html+handlebars"><br />
{{#shortentext}} 15, {{{description}}} {{/shortentext}}<br />
</syntaxhighlight><br />
== Template files ==<br />
Templates are saved in <tt>templates/*.mustache</tt> files within core components and plugins folders. When loading them, templates are identified by their [[Frankenstyle|full component name]] followed by slash and the filename without the file extension. <br />
<br />
'''Example:''' A <tt>timer</tt> template provided by the <tt>mod_lesson</tt> module would be referred to as <tt>mod_lesson/timer</tt> and it would be located in <tt>mod/lesson/templates/timer.mustache</tt> file.<br />
<br />
Since Moodle 3.8 it is possible to use sub-directories under the <tt>templates</tt> directory. The first sub-directory name must meet [[Coding style#Rules for level2|certain naming rules]] (same as for class namespaces).<br />
=== Mustache file boilerplate ===<br />
<pre><br />
{{!<br />
This file is part of Moodle - https://moodle.org/<br />
<br />
Moodle is free software: you can redistribute it and/or modify<br />
it under the terms of the GNU General Public License as published by<br />
the Free Software Foundation, either version 3 of the License, or<br />
(at your option) any later version.<br />
<br />
Moodle is distributed in the hope that it will be useful,<br />
but WITHOUT ANY WARRANTY; without even the implied warranty of<br />
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the<br />
GNU General Public License for more details.<br />
<br />
You should have received a copy of the GNU General Public License<br />
along with Moodle. If not, see <http://www.gnu.org/licenses/>.<br />
}}<br />
{{!<br />
@template plugintype_pluginname/template_name<br />
<br />
Template purpose and description.<br />
<br />
Classes required for JS:<br />
* none<br />
<br />
Data attributes required for JS:<br />
* none<br />
<br />
Context variables required for this template:<br />
* none<br />
<br />
Example context (json):<br />
{<br />
}<br />
}}<br />
</pre><br />
== Rendering in PHP ==<br />
Use the <code>render_from_template()</code> method to render the given context data with the template.<br />
<syntaxhighlight lang="php"><br />
$data = [<br />
'name' => 'Lorem ipsum',<br />
'description' => format_text($description, FORMAT_HTML),<br />
];<br />
<br />
echo $OUTPUT->render_from_template($templatename, $data);<br />
</syntaxhighlight><br />
=== Renderers ===<br />
Templates can be effectively used in [[Renderer|renderers]] to generate the HTML representing the given <code>renderable</code> object. Make your <code>renderable</code> class also implement <code>templatable</code> interface. It will have to implement a new method <code>export_for_template(renderer_base $output)</code>. The method should return a JSON-serialisable object (containing only objects, arrays and scalars) that will be passed as the rendering context data to a template.<br />
<br />
In the simplest case where you have a renderable, templatable object with a class name matching the name of the template that will render it, you do not need to add any renderer code explicity. Passing your widget directly to <code>$OUTPUT->render()</code> will infer the name of your template, call <code>export_for_template()</code> and <code>render_from_template()</code>, then return the result.<br />
<br />
Example of the method added to the renderable mywidget:<br />
<syntaxhighlight lang="php"><br />
/**<br />
* Describe the renderable widget so it can be renderer by a mustache template.<br />
*<br />
* @param renderer_base $output<br />
* @return stdClass<br />
*/<br />
public function export_for_template(renderer_base $output) {<br />
<br />
$data = new stdClass();<br />
$data->canmanage = $this->canmanage;<br />
$data->things = [];<br />
foreach ($this->things as $thing) {<br />
$data->things[] = $thing->to_record();<br />
}<br />
$data->navigation = [];<br />
foreach ($this->navigation as $button) {<br />
$data->navigation[] = $output->render($button);<br />
}<br />
<br />
return $data;<br />
}<br />
</syntaxhighlight><br />
The rendering method can now use templates to render the object:<br />
<syntaxhighlight lang="php"><br />
/**<br />
* Render mywidget via a template.<br />
*<br />
* @param mywidget $widget<br />
*<br />
* @return string HTML<br />
*/<br />
protected function render_mywidget(mywidget $widget) {<br />
$data = $widget->export_for_template($this);<br />
return $this->render_from_template('tool_myplugin/mywidget', $data);<br />
}<br />
</syntaxhighlight><br />
In your page:<br />
<syntaxhighlight lang="php"><br />
$output = $PAGE->get_renderer('tool_myplugin');<br />
echo $output->render($widget);<br />
</syntaxhighlight><br />
== Rendering in JavaScript ==<br />
Rendering a template from JavaScript is fairly easy. There is a [[Javascript Modules|JavaScript module]] that can load (and cache) a template and then use it for rendering the given data.<br />
<syntaxhighlight lang="javascript"><br />
import {exception as displayException} from 'core/notification';<br />
import Templates from 'core/templates';<br />
<br />
// This will be the context for our template. So {{name}} in the template will resolve to "Tweety bird".<br />
const context = {<br />
name: 'Tweety bird',<br />
intelligence: 2,<br />
};<br />
<br />
// This will call the function to load and render our template.<br />
Templates.renderForPromise('block_looneytunes/profile', context)<br />
<br />
// It returns a promise that needs to be resoved.<br />
.then(({html, js}) => {<br />
// Here eventually I have my compiled template, and any javascript that it generated.<br />
// The templates object has append, prepend and replace functions.<br />
Templates.appendNodeContents('.block_looneytunes .content', html, js);<br />
})<br />
<br />
// Deal with this exception (Using core/notify exception function is recommended).<br />
.catch(ex => displayException(ex));<br />
</syntaxhighlight><br />
Under the hood, this does a few clever things for us. It loads the template via an AJAX call if it was not cached. It finds any missing lang strings in the template and loads them in a single AJAX request. It split the JS from the HTML and returns us both in easy to use way. Read on for how to nicely deal with that <code>js</code> parameter.<br />
== Template requires JavaScript ==<br />
Sometimes a template requires that some JavaScript runs when it is added to the page in order to give it more features. In the template we can include blocks of JavaScript, but we should use a special section tag that has a "helper" method registered to handle JavaScript carefully. <br />
<br />
Example<br />
<syntaxhighlight lang="html+handlebars"><br />
<!-- HTML here -->><br />
{{^element.frozen}}<br />
{{#js}}<br />
require(['theme_boost/form-display-errors'], function(module) {<br />
module.enhance({{#quote}}{{element.id}}{{/quote}});<br />
});<br />
{{/js}}<br />
{{/element.frozen}}<br />
</syntaxhighlight><br />
If this template is rendered by PHP, the JavaScript is separated from the HTML, and is appended to a special section in the footer of the page "after" requirejs has loaded. This provides the optimal page loading speed. If the template is rendered by JavaScript, the JavaScript source will be passed to the "done" handler from the promise. Then, when the "done" handler has added the template to the DOM, it can call <br />
<syntaxhighlight lang="javascript"><br />
templates.runTemplateJS(javascript);<br />
</syntaxhighlight><br />
which will run the javascript (by creating a new script tag and appending it to the page head).<br />
<br />
Note: It is recommended that the JavaScript present be kept to a minimum - preferably just the inclusion of a module designed to do the actual work. This allows for a template to be overridden by a renderer without the JavaScript having to be copied. It also enforces appropriate linting and minification of the code.<br />
== Overriding templates in a theme ==<br />
Templates can be overridden by a theme.<br />
# Find the template that you want to change - e.g. <tt>mod/wiki/templates/ratingui.mustache</tt><br />
# Create a sub-folder under your themes "templates" directory with the component name of the plugin you are overriding - e.g <tt>theme/timtam/templates/mod_wiki</tt><br />
# Copy the <tt>ratingui.mustache</tt> file into the newly created <tt>theme/timtam/templates/mod_wiki</tt> and edit it.<br />
You should see your changes immediately if theme designer mode is on. Templates are cached just like CSS, so if you are not using theme designer mode you will need to purge all caches to see the latest version of an edited template. If the template you are overriding contains a documentation comment it is recommended to remove it. It will still show the documentation in the template library.<br />
== Documenting the templates ==<br />
Theme designers need to know the limits of what they can expect to change without breaking anything. Also, correctly documented templates can be previewed in the "Template library" tool shipped with Moodle.<br />
* '''Classes required for JS''' - This is a list of classes that are used by the javascript for this template. If removing a class from an element in the template will break the javascript, list it here.<br />
* '''Data attributes required for JS''' - This is a list of data attributes (e.g. data-enhance="true") that are used by the javascript for this template. If removing a data attribute from an element in the template will break the javascript, list it here.<br />
* '''Context variables required for this template''' - This is a description of the data that may be contained in the context that is passed to the template. Be explicit and document every attribute.<br />
* '''Example context (JSON)''' - The Template library will look for this data in your documentation comment as it allows it to render a "preview" of the template right in the Template library. This is useful for theme designers to test all the available templates in their new theme to make sure they look nice in a new theme. It is also useful to make sure the template responds to different screen sizes, languages and devices. The format is a JSON-encoded object that is passed directly into the render method for this template. <br />
== Coding style ==<br />
This section documents some coding style guidelines to follow when writing templates. The reason for these guidelines is to promote consistency, and interoperability of the templates.<br />
<br />
'''Include GPL at the top of each template'''. Templates are a form of code and it is appropriate to license them like any other code.<br />
<br />
'''Include a documentation comment for each template.''' The exception is when you are overriding a template, if the documentation from the parent still applies, you do not need to copy it to the overridden template.<br />
<br />
'''Use data-attributes for JS hooks'''. Data attributes are ideal for adding javascript hooks to templates because:<br />
* Classes are meant for styling - theme designers should be able to change the classes at will without breaking any functionality.<br />
* IDs must be unique in the page, but it is not possible to control how many times the same template might be included in the page.<br />
* Data attributes can have meaningful names and can be efficiently queried with a selector.<br />
<br />
<br />
'''Avoid custom CSS for templates'''. This is not a hard rule, but a preference. We already have too much CSS in Moodle - where ever possible we should try and re-use the existing CSS instead of adding new CSS to support every new template.<br />
<br />
'''Re-use core templates as much as possible''' - First we need to build the core set of reusable templates - but once that is in place we should always try to re-use those core templates to build interfaces. This will make Moodle more consistent, attractive and customisable.<br />
<br />
'''Do use the CSS framework classes directly in the templates''' - We have bootstrap in core - so lets make the most of it. There is no problem using bootstrap classes in core templates, as long as the "base" theme is also tested, and an overridden template is added there if required.<br />
<br />
'''Avoid IDs for styling or javascript''' - IDs should never evet be used for styling as they have a high CSS specificity, and so are hard to override. In addition, IDs should be unique in the page, which implies that a template could only be used once in a page. IDs are also not ideal for javascript, for the same reason (must be unique in a page).<br />
<br />
The only acceptable case to use an ID is you need to create a one to one connection between the JS and template. In this case use the uniqid helper to generate an ID that will not conflict with any other template on the page, and use it as part of the ID.<br />
<syntaxhighlight lang="html+handlebars"><br />
<div id="{{uniqid}}-somethingspecific"><br />
</div><br />
{{#js}}<br />
callFunction('{{uniqid}}-somethingspecific');<br />
{{/js}}<br />
</syntaxhighlight><br />
'''Follow CSS coding style''' - See [[CSS coding style]]. Use hyphens as word-separators for class names. Use lower case class names.<br />
<br />
'''Wrap each template in one node with a classname that matches the template name'''. Generate a class name by combining the component and template names and separating words with underscore.<br />
<br />
e.g.<br />
<syntaxhighlight lang="html+handlebars"><br />
<div class="core_user_header"><br />
...<br />
</div><br />
</syntaxhighlight><br />
== Notes ==<br />
=== Iterating over PHP arrays in Mustache templates ===<br />
In PHP, both lists and hashes are implemented as arrays. But Mustache must treat them as different structures because of cross language compatibility. If the PHP array does not have the <code>[0]</code> key, or there are gaps in the keys sequence, Mustache will interpret that array as a hash and will not iterate over it.<br />
<br />
So you need to make sure the elements in the list are properly indexed:<br />
<syntaxhighlight lang="php"><br />
$datafortemplate->mylist = array_values($myarraywithnonnumerickeys)<br />
</syntaxhighlight><br />
=== Test for non-empty array in Mustache templates ===<br />
Short answer: you can't.<br />
<syntaxhighlight lang="html+handlebars"><br />
{{! This will work in PHP but not in JavaScript. }}<br />
{{#users.0}} ... {{/users.0}}<br />
</syntaxhighlight><br />
<syntaxhighlight lang="html+handlebars"><br />
{{! This will work in JavaScript but not in PHP. }}<br />
{{#users.length}} ... {{/users.length}}<br />
</syntaxhighlight><br />
As a workaround, include a specific property in the context like "hasusers".<br />
<syntaxhighlight lang="json"><br />
{<br />
"hasusers": false,<br />
"users": []<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
<syntaxhighlight lang="html+handlebars"><br />
{{#hasusers}}<br />
{{#users}}<br />
....<br />
{{/users}}<br />
{{#hasusers}}<br />
</syntaxhighlight><br />
=== Squash whitespace in a template ===<br />
Sometimes whitespace is significant, for example inside a link it will show with an underline. If you need two Mustache tags from separate lines to be rendered with no whitespace between them you can use Mustache comments to squash the whitespace.<br />
<syntaxhighlight lang="html+handlebars"><br />
<a href="blah">{{!<br />
}}{{icon}}{{!<br />
}}{{name}}</a><br />
</syntaxhighlight><br />
=== Access to globals ===<br />
In PHP you have access to $CFG object to allow access to properties. Mustache rendering also exposes a globals object automatically during rendering. For example:<br />
<nowiki><a href="{{globals.config.wwwroot}}/login/logout.php?sesskey={{globals.config.sesskey}}">{{#str}}</nowiki> logout, core <nowiki>{{/str}}</nowiki><nowiki></a></nowiki><br />
The properties available on the <code>globals.config</code> object are the same as normally exposed for javascript; these are gathered from <code>get_config_for_javascript()</code> function in ''/lib/outputrequirementslib.php''.<br />
== Core templates ==<br />
Core templates should ideally be simple generic components that can be used within other templates to create more complex page layouts. They should be flexible enough for developers and themers to easily use without having to replace the template. The templates should attempt to encapsulate some core structure for the element as well as key classes while allowing the content to be easily overridden. Ultimately we want to avoid having duplicate HTML copied from template to template where possible, particularly if the HTML element has some classes associated with it.<br />
<br />
Mustache relies on variables to substitute context data into the template but unfortunately it's very unlikely that the the names of the context data will match what the template is expecting for all the places that the template might be used. So in order to allow easy extensibility and avoid having to duplicate templates just to rename the variables we can wrap them in block variables which would allow the template that is including our template to replace that variable with one from it's own context inline.<br />
<br />
There are a few key points to keep in mind when writing a core template:<br />
* Consider how your template will actually be used. Try writing a test page that uses your template to help discover some of the assumptions you might have in the template.<br />
* The example context you provide in the template is mostly just for showing the template in the template library and is likely not how your template will actually be used. Most uses of the template will have a different context all together.<br />
* Try to enforce a core structure but avoid enforcing a specific context. Content should be overridable.<br />
* Use block variables to indicate sections of your template that people are likely to want to change. Typically where they will be wanting to substitute in their own content.<br />
* Try to keep any javascript that accompanies the template as decoupled from the HTML / CSS structure of the template as possible. Instead of relying on the existence of certain HTML elements or CSS classes it is generally better to leverage data-attributes which can be added to any element.<br />
Let's go through an example to illustrate how you might build a core template. For the example we'll be building a tabs template, since it's a fairly complex component that requires the use of block variables and javascript.<br />
<br />
First we can create a basic template to get the general structure down, let's call it tabs. Here's what it might look like:<br />
<syntaxhighlight lang="html+handlebars"><br />
<div id="{{ uniqid }}-tab-container"><br />
<ul role="tablist" class="nav nav-tabs"><br />
{{# tabs }}<br />
<li role="tab"<br />
data-target="{{ uniqid }}-{{ id }}"<br />
data-selected-class="active"<br />
aria-controls="{{ uniqid }}-{{ id }}"<br />
aria-selected="false" tabindex="-1"><br />
<br />
<a href="#">{{{ name }}}</a><br />
</li><br />
{{/ tabs }}<br />
</ul><br />
<div class="tab-content"><br />
{{# tabs }}<br />
<div role="tabpanel"<br />
class="tab-pane"<br />
id="{{ uniqid }}-{{ id }}"><br />
<br />
{{{ content }}}<br />
</div><br />
{{/ tabs }}<br />
</div><br />
</div><br />
{{#js}}<br />
require(['jquery','core/tabs'], function($, tabs) {<br />
<br />
var container = $("#{{ uniqid }}-tab-container");<br />
tabs.create(container);<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
The template requires a context that looks something like:<br />
<syntaxhighlight lang="json"><br />
{<br />
"tabs": [<br />
{"id":"tab1","name":"Tab 1","content":"This is tab 1 content <a href=\"#\">test</a>"},<br />
{"id":"tab2","name":"Tab 2","content":"This is tab 2 content <a href=\"#\">test</a>"},<br />
{"id":"tab3","name":"Tab 3","content":"This is tab 3 content <a href=\"#\">test</a>"}<br />
]<br />
}<br />
</syntaxhighlight><br />
The javascript required to power the tabs element (keyboard navigation, show / hide panels etc) is written as an AMD module and is included by the template. The javascript is a little too large to go through here, but some key points to consider when writing it are: It should ideally be independent of the HTML structure, so if someone wants to completely rewrite the tabs to be different elements (e.g. buttons or a set of divs) then the same javascript can be used without needing to change it. In order to achieve this it is important to identify the key components of the template.<br />
<br />
In this case it is a tab list, a tab and it's content. One way to identify these components would be to inspect the structure of the DOM, for example you might say "find me the ul element" when looking for the tab list and then "find my the child li elements" to find the tabs. While this would work, it couples your javascript to the HTML structure and makes it difficult to change later. A different approach would be to use the element attributes, for example you might say "find my the element with the role 'tablist'" to get the tab list and then "find me the elements with the role 'tab'" to get the tabs. This allows the HTML structure to change without breaking the javascript (as long as the correct attributes are set, of course).<br />
<br />
Another point of consideration for this example is what class to apply to a tab when it is selected. It makes sense to just apply something like "active" in the javascript, but that once again couples it to a particular CSS framework which makes it more difficult to change without modifying the javascript. In this case I chose to add a data attribute to the element to indicate which class will be set when the tab is selected. This means the javascript doesn't have to guess what the appropriate class is, it can just get it from the template.<br />
<br />
Ok, so we've got our basic template. It's time to use it! Let's say we want to create a simple user profile page that might show 2 tabs, the first tab will be the user's name and the second tab will be the user's email address (please excuse the contrived example).<br />
<br />
Here's what the page might look like:<br />
<syntaxhighlight lang="html+handlebars"><br />
<html><br />
<header><title>User Profile</title></header><br />
<body><br />
{{< core/tabs }}<br />
</body><br />
</html><br />
</syntaxhighlight><br />
That looks pretty simple! The only problem is, how do I get my content there? I would have to supply a context like this in order to display the tabs I want:<br />
<syntaxhighlight lang="json"><br />
{<br />
"tabs": [<br />
{"id":"tab1","name":"Name","content":"Your name is Mr. Test User."},<br />
{"id":"tab2","name":"Email","content":"Your email is testuser@example.com"},<br />
]<br />
}<br />
</syntaxhighlight><br />
Let's assume that the context for this page doesn't match what the tabs template is expecting though. Let's assume the tabs template is being rendered with this context:<br />
<syntaxhighlight lang="json"><br />
{<br />
"name":"Mr. Test User",<br />
"email":"testuser@example.com"<br />
}<br />
</syntaxhighlight><br />
Unfortunately, we'll almost certainly never have complete control over all of the contexts that our template will be rendered in which means we'll be expecting people to write new webservices to supply the same data in different formats every time they want to use a template. It becomes an unmanageable problem.<br />
<br />
Enter blocks! We can make the template more flexible by defining sections of the template that can be overriden when they are included. Pretty neat! This will allow us to enforce a certain core structure but not enforce a context on the template that is including the tabs.<br />
<br />
Let's have another go at that template, this time leveraging blocks:<br />
<syntaxhighlight lang="html+handlebars"><br />
<div id="{{ uniqid }}-tab-container"><br />
{{$ tabheader }}<br />
<ul role="tablist" class="nav nav-tabs"><br />
{{$ tablist }}<br />
{{# tabs }}<br />
<li role="tab"<br />
data-target="{{ uniqid }}-{{ id }}"<br />
data-selected-class="active"<br />
aria-controls="{{ uniqid }}-{{ id }}"<br />
aria-selected="false" tabindex="-1"><br />
<br />
<a href="#">{{{ name }}}</a><br />
</li><br />
{{/ tabs }}<br />
{{/ tablist }}<br />
</ul><br />
{{/ tabheader }}<br />
{{$ tabbody }}<br />
<div class="tab-content"><br />
{{$ tabcontent }}<br />
{{# tabs }}<br />
<div role="tabpanel"<br />
class="tab-pane"<br />
id="{{ uniqid }}-{{ id }}"><br />
<br />
{{{ content }}}<br />
</div><br />
{{/ tabs }}<br />
{{/ tabcontent }}<br />
</div><br />
{{/ tabbody }}<br />
</div><br />
{{#js}}<br />
require(['jquery','core/tabs'], function($, tabs) {<br />
<br />
var container = $("#{{ uniqid }}-tab-container");<br />
tabs.create(container);<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
A summary of what we've changed:<br />
* Added a $tabheader block around the tab list, in case someone wants to change the ul element to something else.<br />
* Added a $tablist block around the group of tabs to allow them to be overriden on incldue.<br />
* Added a $tabbody block around the content, in case someone wants to change the content elements from divs.<br />
* Added a $tabcontent block around the tab variable for the content to allow the content to be overriden on inlcude.<br />
Now let's see what using this template looks like for your User Profile page:<br />
<syntaxhighlight lang="html+handlebars"><br />
<html><br />
<header><title>User Profile</title></header><br />
<body><br />
{{> core/tabs }}<br />
{{$ tablist }}<br />
<li role="tab"<br />
data-target="{{ uniqid }}-tab1"<br />
data-selected-class="active"<br />
aria-controls="{{ uniqid }}-tab1"<br />
aria-selected="false" tabindex="-1"><br />
<br />
<a href="#">Name</a><br />
</li><br />
<li role="tab"<br />
data-target="{{ uniqid }}-tab2"<br />
data-selected-class="active"<br />
aria-controls="{{ uniqid }}-tab2"<br />
aria-selected="false" tabindex="-1"><br />
<br />
<a href="#">Email</a><br />
</li><br />
{{/ tablist }}<br />
{{$ tabcontent }}<br />
<div role="tabpanel"<br />
class="tab-pane"<br />
id="{{ uniqid }}-tab1"><br />
<br />
Your name is {{ name }}.<br />
</div><br />
<div role="tabpanel"<br />
class="tab-pane"<br />
id="{{ uniqid }}-tab2"><br />
<br />
Your email address is {{ email }}.<br />
</div><br />
{{/ tabcontent }}<br />
{{/ core/tabs }}<br />
</body><br />
</html><br />
</syntaxhighlight><br />
That looks a bit better! Now we've been able to use the blocks to successfully change the template to use the context available to this page, we no longer need a "tabs" array with "name" and "content". Even the javascript will continue to work because we've kept the correct element attributes. <br />
<br />
We've still got a slight problem though... In order to change the data for the template we've had to copy & paste the HTML from the original template into our blocks as we do the override. While this works fine in this example, it means we don't quite get the encapsulation we want within the templates since we're leaking internal implementation details. If we ever wanted to change the CSS framework we use for Moodle (say from bootstrap 2 to boostrap 3 or 4) we'd have to find all the places in the code where this tabs template is used and make sure that the HTML is correct in their block overrides.<br />
<br />
With that in mind, let's take one more pass at this template and see if we can improve it slightly again. This time we're doing to split the template out into 3 templates.<br />
<br />
tabs.mustache:<br />
<syntaxhighlight lang="html+handlebars"><br />
<div id="{{ uniqid }}-tab-container"><br />
{{$ tabheader }}<br />
<ul role="tablist" class="nav nav-tabs"><br />
{{$ tablist }}<br />
{{# tabs }}<br />
{{> core/tab_header_item }} <br />
{{/ tabs }}<br />
{{/ tablist }}<br />
</ul><br />
{{/ tabheader }}<br />
{{$ tabbody }}<br />
<div class="tab-content"><br />
{{$ tabcontent }}<br />
{{# tabs }}<br />
{{> core/tab_content_item }}<br />
{{/ tabs }}<br />
{{/ tabcontent }}<br />
</div><br />
{{/ tabbody }}<br />
</div><br />
{{#js}}<br />
require(['jquery','core/tabs'], function($, tabs) {<br />
<br />
var container = $("#{{ uniqid }}-tab-container");<br />
tabs.create(container);<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
tab_header_item.mustache<br />
<syntaxhighlight lang="html+handlebars"><br />
<li role="tab"<br />
data-selected-class="active"<br />
aria-selected="false" tabindex="-1"><br />
<br />
<a href="#">{{$ tabname }}{{{ name }}}{{/ tabname }}</a><br />
</li><br />
</syntaxhighlight><br />
tab_content_item.mustache<br />
<syntaxhighlight lang="html+handlebars"><br />
<div role="tabpanel"<br />
class="tab-pane"<br />
<br />
{{$ tabpanelcontent }}{{{ content }}}{{/ tabpanelcontent }}<br />
</div><br />
</syntaxhighlight><br />
A summary of the changes:<br />
* Split the template into 3, moving the tab into it's own template and the content into it's own and then including them in the tabs template.<br />
* Removed the ids from the tabs and content. The javascript would be updating to assign these ids at runtime so that they don't need to be provided as part of the template context.<br />
* Added a $tabname block for in the tab_header_item template to make the name flexible on import.<br />
* Added a $tabpanelcontant block in the tab_content_item template to make the content flexible on import.<br />
Cool, so let's see what that looks like in our example now:<br />
<syntaxhighlight lang="html+handlebars"><br />
<html><br />
<header><title>User Profile</title></header><br />
<body><br />
{{> core/tabs }}<br />
{{$ tablist }}<br />
{{< core/tab_header_item }}<br />
{{$ tabname }}Name{{/ tabname }}<br />
{{/ core/tab_header_item }}<br />
{{< core/tab_header_item }}<br />
{{$ tabname }}Email{{/ tabname }}<br />
{{/ core/tab_header_item }}<br />
{{/ tablist }}<br />
{{$ tabcontent }}<br />
{{< core/tab_content_item }}<br />
{{$ tabpanelcontent }}Your name is {{ name }}.{{/ tabpanelcontent }}<br />
{{/ core/tab_content_item }}<br />
{{< core/tab_content_item }}<br />
{{$ tabpanelcontent }}Your email address is {{ email }}.{{/ tabpanelcontent }}<br />
{{/ core/tab_content_item }}<br />
{{/ tabcontent }}<br />
{{/ core/tabs }}<br />
</body><br />
</html><br />
</syntaxhighlight><br />
And we're done! After making the changes above we've been able to keep the benefits of the previous change to allow the context changes but we've also removed the need to copy & paste the HTML everywhere. Instead we're able to use the child templates with a few additional blocks defined to get the content in there.<br />
<br />
Now if we want to change tabs HTML or CSS frameworks we can just change the core tabs templates and this page will receive the updates for free.<br />
[[Category:AJAX]]<br />
[[Category:Javascript]]<br />
[[Category:Output]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Moodle_4.0_developer_update&diff=61786Moodle 4.0 developer update2022-03-09T21:17:02Z<p>Tim+Hunt: Notes about what needs to be done because of the question bank changes.</p>
<hr />
<div>{{Moodle 4.0}}This page highlights the important changes that are coming in Moodle 4.0 for developers. Including how the UX improvements impact custom themes, relevant API changes, and what you can do as developer to prepare for the 4.0 release.<br />
== Navigation changes ==<br />
The core Navigation API has been left mostly untouched. The callbacks to all navigation callbacks remains unchanged and will be called as part of the regular 'navigation' and 'settingsnav' initialisation. Some new core classes have been created and exist within a new namespace 'core/navigation' and serves as conduit to rearrange, cherry-pick existing navigation nodes from the navigation/settingsnav trees and display within the respective navigation type. As such, it is highly recommended to provide unique keys for custom navigation nodes as this helps in the cherry-picking / rearranging process within the new classes.<br />
=== Primary navigation ===<br />
The primary navigation(the navbar) apart from the existing content will now display links to the Dashboard, My Courses, Site Admin and Course search, by default. You can still add items to the navbar via the 'custom menu' option. This will be displayed within the 'More' menu. We have transitioned the menus to be rendered via templates - refer user_menu.mustache. The lang menu has been moved to reside within the user menu.<br />
==== Customising the primary navigation ====<br />
Not yet implemented but we are looking at allowing the full addition and removal of any of the primary navigation tabs in the boost theme config file.<br />
=== Secondary navigation ===<br />
The main content area shows tabs for secondary navigation with a maximum of 5 items being rendered in this ‘more’ menu. A new UI component has been created to render menus like this. Files:<br />
/lib/templates/moremenu.mustache<br />
==== Changing the order of tabs ====<br />
Apart from the previously mentioned functions, you can also create a custom secondary class as mentioned earlier. This will automatically be picked by getter and used to render the secondary nav within the activity. E.g. mod_assign/local/views/secondary. Note: This is currently only possible on an activity and block level. <br />
=== Tertiary navigation ===<br />
=== New API functions ===<br />
==== Page API ====<br />
* Magic getters to fetch the primary and secondary navs and the primary output.<br />
* The secondarynav magic getter also checks whether a custom secondary class has been defined within the module's local\views directory. Use this if you want to deviate from the standard secondary nav structure/order.<br />
<br />
* set_secondary_nav - Force override the secondary navigation class<br />
<br />
* has_secondary_navigation_setter - Sets the ‘_hassecondarynavigation’ to indicate whether a page should render the secondary navigation<br />
==== Navigationlib ====<br />
* set_show_in_secondary_navigation - whether or not a node should be displayed in the secondary nav. Accepts a single boolean argument<br />
* set_force_into_more_menu- whether or not to force a node into the 'More' menu. Accepts a single boolean argument<br />
==== The activity header class ====<br />
There is a new activity header class that handles the display of information common to activities. 3rd party activities are not required to explicitly output this information as part of rendering individual pages.<br />
<br />
The common information that are currently handled by the class are:<br />
* title<br />
* description<br />
* completion information<br />
<br />
<br />
As part of the update it was required that the initial information to be displayed by the class be toggable at a theme and layout level. Taking this into account the following theme level configurable exists:<br />
* activityheaderconfig => An array that currently only enforces 'notitle' but can be expanded in the future NOTE: Boost has this set as true by default 'options'<br />
The following layout level options that can be defined:<br />
* noactivityheader - to remove the header in this specific layout.<br />
* activityheader - An array that enforces the following options:<br />
** notitle<br />
** nocompletion<br />
** nodescription<br />
The class has a page level getter which you can use to fetch the current version of the class. The base state is initialised within the constructor with the completion information only fetched when data is exported for the template.<br />
<br />
The class has setters for the following variables which can be leveraged to modify the header for a particular page in the format set_{variable_name}:<br />
* hidecompletion<br />
* description<br />
* title<br />
Alternately, bulk operations can also be done by passing the above variables in an array to 'set_attrs' which in turn calls the setters.<blockquote>'''Note: Any updates to the activityheader needs to be performed before the call to $OUTPUT->header'''</blockquote><br />
===== Theme updates: =====<br />
In order for 3rd party themes to use the class they need to export the activity_header and include the following into their base template :<syntaxhighlight lang="html"><br />
{{#headercontent}}<br />
{{> core/activity_header}}<br />
{{#headercontent}}<br />
</syntaxhighlight>** headercontent being the array element that contains the exported activity_header data <br />
===== Accessibility notes: =====<br />
The jump to ‘maincontent’ div is now rendered within the activity header when within an activity context<br />
== Component library ==<br />
Each Moodle installation now ships with a Moodle User Interface (UI) Component library, a documentation system used to describe all the Bootstrap components and the custom Moodle components. The component Library is a helper tool for developers when creating user interfaces, a testing tool for theme developers and a documentation tool for core developers. The ultimate goal of having a component library is to encourage developers to create consistent user interfaces to improve Moodle’s overall user experience.<br />
<br />
The library contains pages with documentation about User Interface components. It contains details on how to use the component, what variations are available and the JavaScript events / options are associated with the component.<br />
<br />
When writing on these pages it is possible to render core mustache templates using some custom syntax like this:<br />
<nowiki>{{< mustache template="core/notification_error" >}}</nowiki><br />
<nowiki>{{< /mustache >}}</nowiki><br />
You can also call core JavaScript or use HTML examples where the html code and the rendered result are visible in the Component Library. For more info visit the [http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/moodle-templates/ Moodle templates] page or the [http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/moodle-javascript/ Moodle JavaScript] page.<br />
<br />
Each page in the library uses the current css from the default theme in your Moodle installation, if you have multiple themes installed and enabled the setting "Allow theme changes on url", the component library will have a theme selector option.<br />
<br />
A hosted version of the Component Library can be found here. http://componentlibrary.moodle.com<br />
=== Enabling the Component Library ===<br />
Component library pages are written in the markdown language. These pages need to be compiled to HTML pages before the Component Library is visible. To compile the pages the server running Moodle needs to have the [[Javascript Modules#Install%20NVM%20and%20Node|JavaScript developer tools installed]] (nodeJs and Grunt)<br />
<br />
If your server meets all requirements you can enable the library running<br />
$ npm install<br />
$ grunt componentlibrary<br />
Further installation instructions can be found in the Component Library itself.<br />
=== Documenting new UI Components ===<br />
There are no set rules for adding new pages in the component library yet. These rules will need to be written and adopted in the integration process for Moodle code.<br />
<br />
As a guideline for making this rules consideration are:<br />
<br />
The component library is not about single use components, for example the Moodle grade book (a huge component with many custom features). Or about very common components like buttons, these are already covered by the Bootstrap section of the component library.<br />
<br />
New features should be build keeping in mind the UI part needs to be customisable and if possible (and making sense) reusable. And example would be the new page drawers that we are introducing for the Navigation project. Or the custom primary navigation menus where overflowing items are pushed into a More section.<br />
== Theme changes ==<br />
=== Edit switch ===<br />
On theme boost the “Turn editing on” and “Customise this page” buttons have been replaced by an edit switch in the top navbar. Theme Classic will keep using the old buttons. Child themes can choose to use the edit switch if the theme config.php is using this variable<br />
$THEME->haseditswitch = true;<br />
The languague menu, which used to be rendered in place of the custom menu has moved to the user dropdown when the user is logged in. If not logged in it will be placed next to the search / notification / messaging icon in the top navbar.<br />
=== Login page ===<br />
The login page has been redesigned and allows the admin to configure a background image for the login page only in the theme settings page. This change is available in both Boost and Classic. The login page still has all the features with an improved layout. <br />
=== The page footer ===<br />
In large screens, the page footer button is only visible when clicking a help button at the bottom right of the screen.<br />
=== User initials as profile picture placeholder ===<br />
If users do not upload a profile picture the user initials are displayed on a rounded gray background as a placeholder picture in the top navbar or any other page using a placeholder image. This change will be available in both Boost and Classic. <br />
<br />
With the introduction of this placeholder image the full username will no longer be displayed in the top navbar.<br />
=== Removal of back to top link ===<br />
The "back to top" link will be removed for theme boost since the new course index reduced the dependence on page scrolling. Also, the new footer is positioned where this component used to be.<br />
=== Styling changes ===<br />
By default rounded edges will be used for UI components, for the page header and main content area the borders will be removed. <br />
=== New layout page ===<br />
Theme boost now uses the drawers.php layout for the course index and blocks.<br />
<br />
== Question bank changes ==<br />
There was a big project to deliver [[Question bank improvements for Moodle 4.0]] which added a new plugin type for adding features to the question banks, tracking the version history for each question as it is edited (question table has been split into <code>question</code>, <code>question_versions</code> and <code>question_bank_entries</code>), and tracking where each question is going to be used, with new tables <code>question_references</code> and <code>question_set_references</code>. This work was done in Epic MDL-70329 if you want to track down the details of any of the core changes.<br />
<br />
=== Question type plugins ===<br />
Amazingly, we (Safat and colleagues at Catalyst AU) managed to implement this without breaking most question type plugins.<br />
<br />
However, the changes to the question bank, and the other Moodle 4.0 changes, probably broke the Behat tests for your plugin. To help with fixing that, MDL-74130 adds navigation to key question type pages (Preview and Edit for a question, and standard question bank pages like the bank itself, import and export) which should let you fix your test efficiently, and in a way that will work in all Moodle versions since 3.9.<br />
<br />
The 'most' in the first paragraph here is becuase more advance question types may require more effort to fix. (For example qtype_combined which creates multi-part qusetions like the core qtype_multianswer; or qtype_pmatch or qtype_stack, which store additional data - questions tests - alongside the question itseld. How should that work with versionning?) But, if you have not done weird things like that, you are probably safe. If you find anything else that causes problems, please list it here.<br />
<br />
The same thing should apply to question behaviour and question import/export format plugings: no significant changes required (probably just fixing the Behat tests because of the navigation changes).<br />
<br />
=== New plugin type: qbank plugins ===<br />
This is not something that will cause problems for people upgrading from 3.x. Rather, it is an exciting possibility you can explore once you have survived process of upgrading to 4.0. There is a whole new plugin type which you can create to add new features to the question bank. For example extra columns, new actions and bulk actions, and so on. See [[Question_bank_plugins]].<br />
<br />
=== Activies that use questions ===<br />
The probable bad news is if you have an activity module which uses questions. So far, the only activity which has been fixed is mod_quiz in Moodle core, so we don't yet have a good picture of what fixes will be necessary in other activities. Work is about to start fixing [https://github.com/studentquiz/moodle-mod_studentquiz mod_studentquiz], so watching that should give more clues. As we do that, we will try to update this section of this page. Other help writing the information required here would also be greatly appreciated.<br />
<br />
== The course format system ==<br />
Most of the logic for rendering and editing a course has been moved to a new subsystem called courseformat. The subsystem is located in "course/format" folder so it includes all the format plugins inside. The methods and modules which are distributed between the course and the course/format folders are now rearranged or refactored to be aligned with the current Moodle coding style.<br />
=== Mandatory renderer in course formats ===<br />
Now format plugins renderer is not optional anymore. Legacy formats without a renderer will get a deprecation message but it will continue working however, they should create a new renderer as soon as possible. The section-based format can do it by extending the provided core_courseformat\output\section_renderer class which includes all the necessary methods.<br />
=== New format base class ===<br />
The old base_format class (which all plugins extend) is now renamed as core_courseformat\base. The new class provides all the functionally of the previous base_format but it has been refactored to be used as a centralized source of truth for the course rendering. Legacy formats should extend the new class to avoid the deprecation message.<br />
<br />
Now, the plugin format class provides information such as:<br />
* If the page is displaying a single or multiple section<br />
* Give access to other related format objects like the modinfo, the course record, maximum number of sections...<br />
* If the format is compatible with features like course index, reactive components, ajax...<br />
* Other format specifics like the page title, the default section name, default blocks...<br />
<br />
<br />
The format instance is now the main object output components will use to render a course (see next section for more information).<br />
=== New course output classes and mustache files ===<br />
Traditionally, section-based course formats uses print_single_section_page and print_multiple_section_page to render the course content. In Moodle 4.0 most of the course rendering methods are migrated to output components and mustache templates. The old methods will get deprecation messages if they use the old renderer methods.<br />
<br />
This is an example of a format rendering a course:<syntaxhighlight lang="php-brief"><br />
// Get the course format instance.<br />
$format = course_get_format($course);<br />
<br />
// Get the specific format renderer.<br />
$renderer = $format->get_renderer($PAGE);<br />
<br />
if (!empty($displaysection)) {<br />
// Setup the format instance to display a single section.<br />
$format->set_section_number($displaysection);<br />
}<br />
<br />
// Create the ouptut instance and render it.<br />
$outputclass = $format->get_output_classname('content');<br />
$widget = new $outputclass($format);<br />
<br />
echo $renderer->render($widget);<br />
</syntaxhighlight>Format plugins are free to use its own output classes to render a course, or they could override the existing output classes by providing their own implementation. For example, the default output for "content" (as in the previous example) is "core_courseformat\output\local\|content", however, if the plugin has a "format_XXX\output\courseformat\content" class, the $format->class the get_output_class will return the overridden one.<br />
Another important update on course rendering is that now all course structure is rendered using mustache templates instead of the original html_writer methods. Now themes are able to override the course format by providing alternative versions of the mustache files. All core course templates are located in "course/format/templates".<br />
<br />
All the new output classes and a guide on how to migrate the current third-party plugins will be available soon.<br />
=== Course editor javascript modules and frontend components ===<br />
The majority of the javascript logic related to the course editing is replaced by AMD modules. Because this is a major change in the way courses are edited and rendered, by default format plugins will continue using the previous YUI modules for now. However, formats can start using the new libraries overriding the "$format->supports_components()" method.<br />
<br />
Some Moodle 4.0 new features are only available for courses using the new editor library:<br />
* Edit the course via the course index<br />
* Creating sections without reloading the course page<br />
* The new move section/activity modal<br />
* Native browser drag&drop implementation<br />
The new course editor uses a component-based reactive pattern to keep track of the course changes. The pattern highlights are:<br />
* The main AMD module "core_crouseformat\courseeditor" maintains a data structure called state.<br />
* Each UI element is implemented as a Component that observes the course state data and reacts to any data change<br />
* When any reactive component needs to modify the course, it asks the course editor to execute a mutation. Mutations encapsulate all web services calls and alter the course state data.<br />
<br />
<br />
The reactive library documentation, as well as the format plugin migration guide, will be available soon.<br />
=== Other course related 4.0 changes ===<br />
Two new web services have been added:<br />
* core_courseformat_get_state: user by the new javascript course editor to get the current course state data (containing the list of sections, activities, and other course-related data)<br />
* core_courseformat_update_course: to alter the current course content. Each call returns the parts of the course state altered by the action<br />
== Behat changes ==<br />
To make behat tests more readable and easy to maintain, it is recommended to use the most direct steps to get what the test needs. It is highly recommended to use<br />
I am on the "Activity name" "[modname] activity" page <br />
or<br />
I am on the "Activity name" "[modname] activity" page logged in as "user"<br />
instead of navigating to the activity via<br />
I am on "Course" course homepage<br />
I follow "Activity name"<br />
Now that [https://docs.moodle.org/dev/Prototypes#Course_creation_improvements Course index] is integrated these behat steps<br />
I am on "Course" course homepage<br />
I follow "Activity name"<br />
will fail using Boost theme.<br />
<br />
The reason for it is that the drawer used in Boost is hiding the course index. So when the test is trying to follow an "Activity name" link, it finds two different links:<br />
* one in the course index<br />
* another one in the course main content.<br />
But the first one, the one in the course index, is hidden by the drawer, and the test fails.<br />
<br />
However the recommended behat steps<br />
I am on the "Activity name" "[modname] activity" page <br />
or<br />
I am on the "Activity name" "[modname] activity" page logged in as "user"<br />
Old behat steps that may now fail can be updated to the new steps.<br />
For example:<br />
And I am on the "Test assignment name" "assign activity" page logged in as teacher1<br />
instead of:<br />
When I log in as "teacher1"<br />
And I am on "Course" course homepage<br />
And I follow "Test assignment name"<br />
There are also similar stream-lined navigation steps for accessing question bank pages. See MDL-74130.<br />
<br />
== Other ==<br />
=== Core plugins review ===<br />
A few plugins from core Moodle LMS which are no longer or hardly used have been removed and, if appropriate, added to the Moodle plugins directory.<br />
<br />
More information about this project, the list of plugins to be removed and the process to follow for keeping them before upgrading to 4.0 can be found in the [[Core plugins review]] page.<br />
=== Site admin presets plugin ===<br />
The third-party plugin [https://moodle.org/plugins/block_admin_presets Admin presets], created by David Monllaó and maintained by developers from [https://pimenko.com/ Pimenko] has been adapted and integrated into Moodle 4.0. It stores settings and plugins status (enabled/disabled) in what's called "presets" to let admins quickly switch between different configurations.<br />
<br />
More information about this project can be found in the [[Site admin presets|Site admin presets plugin]] page.<br />
=== JavaScript browser support changes ===<br />
From Moodle 4.0, Internet Explorer is no longer supported. See MDL-73915 and MDLSITE-6109 for further information on this change.<br />
<br />
This change means that changes built on 4.0 onwards (including the master branch) will be different to older versions of Moodle.<br />
<br />
For plugin developers supporting multiple versions of Moodle using a single plugin version, the compiled javascript files are backwards compatible and will _work_ on all supported versions, however if you run the `grunt` command on multiple versions you will see unbuilt changes. Running grunt on all versions of Moodle is not necessary and this check can be safely disabled for Moodle versions 3.9 - 4.0, as long as only at least you run `grunt` against at least one version of Moodle.<br />
<br />
If you need to support Internet Explorer and do not wish to fork your plugin for Moodle 4.0 onwards, then it is recommended that you run `grunt` on an older version of Moodle.<br />
=== The course index element ===<br />
The new course index feature can be themed using a set of scss variables. Use them to change the look and feel instead of adding custom css<br />
/theme/boost/scss/moodle/courseindex.scss<br />
With the introduction of the course index component, the previous and next links shown underneath each activity are no longer needed and they will be removed.<br />
=== Activity icons ===<br />
The icons used for activities have been redesigned and updated for all core moodle activities.<br />
<br />
When viewing the new icons in a file manager, for example for the quiz activity, you will see a simple black monochrome icon with a transparent background.<br />
<br />
On the course page, or in the activity chooser, the icon will display as a white icon on a coloured background. Styling of the icons on the coursepage is controlled by the css in theme/boost/scss/moodle/icons.scss.<br />
<br />
The background colour for activity icons is set using a new variable in function [modname]_supports(). The quiz activity is of type assessment, so in function quiz_supports() there is a new line defining the purpose:<br />
case FEATURE_MOD_PURPOSE: return MOD_PURPOSE_ASSESSMENT;<br />
Available purposes are:<br />
* MOD_PURPOSE_COMMUNICATION<br />
* MOD_PURPOSE_ASSESSMENT<br />
* MOD_PURPOSE_COLLABORATION<br />
* MOD_PURPOSE_CONTENT<br />
* MOD_PURPOSE_ADMINISTRATION<br />
* MOD_PURPOSE_INTERFACE<br />
The background colours linked to these purposes are set in theme/boost/scss/moodle/variables.scss<br />
$activity-icon-colors: map-merge(<br />
(<br />
"administration": #5d63f6,<br />
"assessment": #eb66a2,<br />
"collaboration": #f7634d,<br />
"communication": #11a676,<br />
"content": #399be2,<br />
"interface": #a378ff<br />
),<br />
$activity-icon-colors<br />
);<br />
If activity plugins do not define FEATURE_MOD_PURPOSE the activity icon will be rendered against a light grey background. There is no requirement to define the purpose of activity plugins, it will only affect the icon styling.<br />
<br />
Plugins implementing the variable FEATURE_MOD_PURPOSE are only supported on Moodle 4.0 and newer.<br />
<br />
Customising the activity icon can be done in an alternative way. For example using the styles.css in mod/[pluginname/styles.css<br />
<br />
In the example below the activity plugin developer chooses to keep the coloured icon for the activity and render it as large as the coloured background on the core activities<br />
.modicon_subcourse.activityiconcontainer {<br />
background-color: transparent;<br />
padding: 0;<br />
}<br />
<br />
.modicon_subcourse.activityiconcontainer img {<br />
width: 50px;<br />
height: 50px;<br />
}<br />
To customize all icon colours use this scss array and add it to the ‘Raw initial SCSS’ in the theme Boost advanced settings page. The complete array of icon background colours can be overridden using the ‘Raw initial SCSS’ in the theme settings page. The example below changes the colours of each activity type.<br />
$activity-icon-colors: (<br />
"administration": #5D63F6,<br />
"assessment": #11A676,<br />
"collaboration": #EB66A2,<br />
"communication": #F7634D,<br />
"content": #399BE2,<br />
"interface": #A378FF<br />
)</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Javascript_Modules&diff=61758Javascript Modules2022-03-02T09:43:50Z<p>Tim+Hunt: /* Install grunt */</p>
<hr />
<div>{{Moodle 2.9}}<br />
= Javascript Modules =<br />
== What is a Javascript module and why do I care? ==<br />
A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript. <br />
== Why should I package my code as a module? ==<br />
By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:<br />
<br />
a) Each smaller piece is simpler to understand / debug<br />
<br />
b) Each smaller piece is simpler to test<br />
<br />
c) You can re-use common code instead of duplicating it<br />
= How do I write a Javascript module in Moodle? =<br />
Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format. <br />
<br />
To edit or create an AMD module in Moodle you need to do a couple of things. <br />
<br />
Since version 3.8, Moodle supports [https://github.com/lukehoban/es6features#readme ECMAScript 2015 features] (aka ES6) in a cross browser compatible way thanks to [https://babeljs.io/ Babel JS]. In order to achieve the compatibility with older browsers Babel will compile the newer ES6 features back into ES5 Javascript. Unfortunately this means that in order for your Javascript changes to show in the browser they must be compiled by running [[Grunt]], even with the cachejs config setting set to false (i.e. "Development mode").<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module '''must''' be written on ES6.<br />
== Install NVM and Node ==<br />
The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.<br />
<br />
For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating<br />
<br />
For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)<br />
<br />
Confirm it is working (version below in on Linux, and probably not current):<br />
$ nvm --version<br />
0.35.3<br />
After you have installed '''nvm''', you should install the correct version of NodeJS by running the following commands from your Moodle directory:<br />
nvm install<br />
nvm use<br />
If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:<br />
nvm alias default {{NodeJSExactVersion}}<br />
== Install grunt ==<br />
The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.<br />
<br />
Once this is done, you can run the the following commands from your Moodle directory:<br />
npm install<br />
'''This may mention vulnerabilities, that's fine and doesn't apply.'''<br />
npm install -g grunt-cli<br />
Troubleshooting: on Mac, if you get weird errors, try running <code>sudo xcode-select --reset</code>. And, this probably means that you need to have Xcode or simlar build tools installed and resonably up to date.<br />
== Development mode (Moodle v2.9 to v3.7) ==<br />
To avoid having to constantly run grunt, make sure you set the following in your config.php<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!<br />
<br />
In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.<br />
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(<br />
== Development mode (Moodle v3.8 and above) ==<br />
All Javascript code is now compiled using Babel which means Moodle will only ever serve minified Javascript to the browser, even in development mode. However in development mode Moodle will also send the browser the corresponding source map files for each of the Javascript modules. The source map files will tell the browser how to map the minified source code back to the unminified original source code so that the original source files will be displayed in the sources section of the browser's development tools.<br />
<br />
While in development mode each of the Javascript modules will appear in the browser's source tree as separate modules (no more giant first.js file!) and they will also be loaded with individual network requests (this is a compromise we had to make thanks to some browser bugs with source map files).<br />
<br />
To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Since all Javascript must now be compiled you must run [[Grunt]] in order for you changes to appear in the browser. However rather than running Grunt manually each time on either the whole project or each file you modified, it is recommended that you just run the '''grunt watch''' task at the root of your Moodle directory. The grunt watch task will listen for changes to the Javascript files in the Moodle directory and will automatically lint and compile only the file that is changed after each change is detected. This removes the need to manually run grunt after each change.<br />
== Development mode (Moodle v3.10 and above) ==<br />
All the above for Moodle 3.8 and up applies, plus (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
== Running grunt ==<br />
You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.<br />
<br />
See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.<br />
<br />
If you get the error message<br />
/usr/bin/env: node: No such file or directory<br />
Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911<br />
<br />
On Ubuntu 14.04 this fixed it for me:<br />
sudo ln -fs /usr/bin/nodejs /usr/local/bin/node<br />
Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.<br />
== ES6 Modules (Moodle v3.8 and above) ==<br />
In addition to AMD module syntax Moodle now supports the [https://github.com/lukehoban/es6features#modules ES6 syntax] for writing Javascript modules. All modules (defined using either syntax) are compatible with one another. Behind the scenes the ES6 module syntax is converted into an AMD syntax as part of the Babel compiling process.<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
<br />
The call from a PHP file takes the same format<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('myplugin/myfile','init');<br />
</syntaxhighlight><br />
And a minimal ES6 file will work with <br />
<syntaxhighlight lang="php"><br />
export const init = () => {<br />
window.console.log('we have been started');<br />
};<br />
</syntaxhighlight><br />
=== Export default ===<br />
There is one slight difference between the ES6 definition for exporting modules and the RequireJS (AMD) definition.<br />
<br />
ES6 allows you to export a “default” value which is actually no different to exporting a named value where the name is “default”. Unfortunately, RequireJS allows for unnamed default exports (e.g. you can do "return SomeClass;") which can be imported by just requiring them in other AMD modules.<br />
<br />
That’s a bit confusing, get to the point! Well, it basically means that in Moodle you won’t be able to write an ES6 module that exports both a default and named exports, e.g. "export default function() {...}" and "export const FOO = 'bar'" in the same module. The export default will simply override all other exports in that module.<br />
=== Inline Javascript ===<br />
Another important note is that ES6 support is only for stand alone Javascript files because it relies on the compilation from Babel and Grunt. That means any inline Javascript (either in PHP or in Mustache templates) won't support the ES6 features. Instead it would be best to keep the inline Javascript as minimal as possible and only use it to load a stand alone Javascript module.<br />
== Minimum (getting started) module for plugins ==<br />
This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...<br />
<syntaxhighlight lang="javascript"><br />
// Put this file in path/to/plugin/amd/src<br />
// You can call it anything you like<br />
<br />
export const init = () => {<br />
document.addEventListener('change', e => {<br />
const someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
};<br />
</syntaxhighlight><br />
For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:<br />
<syntaxhighlight lang="javascript"><br />
define([], function() {<br />
<br />
return {<br />
init: function() {<br />
document.addEventListener('change', function(e) {<br />
var someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
}<br />
};<br />
});<br />
</syntaxhighlight><br />
This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,<br />
<syntaxhighlight lang="javascript"><br />
import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.<br />
import * as Str from 'core/str';<br />
import Ajax from 'core/ajax';<br />
<br />
export const init = config => {<br />
};<br />
</syntaxhighlight><br />
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');<br />
</syntaxhighlight><br />
Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed. <br />
<br />
js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));<br />
</syntaxhighlight><br />
...calls<br />
<syntaxhighlight lang="javascript"><br />
export const init = (first, last) {<br />
window.console.log(`The first name was '${first}' and the last name was '${last}'`);<br />
};<br />
</syntaxhighlight><br />
A more comprehensive explanation follows...<br />
== "Hello World" I am a Javascript Module ==<br />
Lets now create a simple Javascript module so we can see how to lay things out. <br />
<br />
Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code. <br />
<br />
After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js). <br />
<br />
Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes. <br />
<br />
Lets create a simple module now:<br />
<br />
blocks/overview/amd/src/helloworld.js<br />
<syntaxhighlight lang="javascript"><br />
// Standard license block omitted.<br />
/*<br />
* @module block_overview/helloworld<br />
* @copyright 2015 Someone cool<br />
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later<br />
*/<br />
<br />
import * as Str from 'core/str';<br />
<br />
/**<br />
* Reveal all of the hidden notes.<br />
*/<br />
const showAllNotes = () => {<br />
document.querySelectorAll('.note.hidden').map(note => note.removeClass('hidden'));<br />
};<br />
<br />
/**<br />
* Hide all of the notes.<br />
*/<br />
const hideAllNotes = () => document.querySelectorAll('.note').map(note => note.addClass('hidden'));<br />
<br />
/**<br />
* Return a personalised, formal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const formal = name => Str.get_string('formallygreet', 'block_overview', name);<br />
<br />
/**<br />
* Return a personalised, informal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const informal = name => {<br />
return Str.get_string('informallygreet', 'block_overview', name);<br />
};<br />
</syntaxhighlight><br />
It's important to note tha tonly functions which are exported will be callable from outside the module. These are part of the public API.<br />
== Loading modules dynamically ==<br />
What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.<br />
<syntaxhighlight lang="javascript"><br />
export const showTheThing = thingToShow => {<br />
// Load the module for this thing.<br />
import(`local_examples/local/types/type_${thingToShow.modname}`)<br />
.then(thingModule => {<br />
window.console.log(`The ${thingToShow.modname} is now available under thingModule within this scope`);<br />
<br />
return thingModule;<br />
});<br />
};<br />
</syntaxhighlight><br />
== Including an external javascript/jquery library ==<br />
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:<br />
<br />
'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''<br />
e.g. <br />
<syntaxhighlight lang="javascript"><br />
// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE<br />
define("typeahead.js", *[ "jquery" ], function(a0) {<br />
return factory(a0);<br />
});<br />
</syntaxhighlight><br />
will not work, as moodle injects it's own define name when loading the library.<br />
<br />
If the library is in AMD format and has a define:<br />
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )<br />
* download the module in both normal and minified versions<br />
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir<br />
* /theme/mytheme/amd/src/jquery.countdown.js<br />
you can now include the module and initialise it (there are multiple ways to do this)<br />
php:<br />
<br />
1. Create your own AMD module and initialise it:<br />
<br />
In your PHP file:<br />
<syntaxhighlight lang="php"><br />
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);<br />
</syntaxhighlight><br />
Javascript module:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/amd/src/countdowntimer.js<br />
import Countdown from 'theme_mytheme/jquery.countdown');<br />
import $ from 'jquery';<br />
<br />
export const init = params => {<br />
$('#clock').countdown(params.targetItem, event => {<br />
$(event.target).html(event.strftime('%D days %H:%M:%S'));<br />
});<br />
};<br />
</syntaxhighlight><br />
2. Call your Javascript module from your template:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/templates/countdowntimer.mustache<br />
<span id="theme_mytheme-clock-{{uniqid}}"></span><br />
{{#js}}<br />
require(['theme_mytheme/countdowntimer'], function(myModule) {<br />
myModule.init({<br />
targetItem: 'theme_mytheme-clock-{{uniqid}}'<br />
});<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
Note: If you feel that you need to work around MDL-62468, then you should probably be putting the data into the DOM in your template via data Attributes, or loading it via a Web Service.<br />
<br />
Another example of adding a 3rd-party library to a Moodle plugin (by Ruslan Kabalin)<br />
<br />
If you want use https://github.com/R-TEK/colr_pickr in your plugin but this module isn't RequireJS-compatible.<br />
<br />
You need to configure requirejs in your plugin to use third-party library:<br />
<syntaxhighlight lang="php"><br />
$config = ['paths' => ['colorpicker' => 'CDN or local path...']];<br />
$requirejs = 'require.config(' . json_encode($config) . ')';<br />
$PAGE->requires->js_amd_inline($requirejs);<br />
</syntaxhighlight><br />
Then in your JS module in the plugin:<br />
<syntaxhighlight lang="javascript"><br />
define([colorpicker], function(ColorPicker) {<br />
const button = document.getElementById('my_picker');<br />
let picker = new ColorPicker(button, '#ff0000');<br />
}<br />
</syntaxhighlight><br />
And another example of using https://github.com/itsjavi/bootstrap-colorpicker (that has a [[jQuery]] dependency) with native ES6 JS:<br />
NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.<br />
<br><br />
<syntaxhighlight lang="javascript"><br />
import ColourPicker from 'local_myplugin/bootstrap-colorpicker';<br />
<br />
const myElement = document.querySelector('.myelement');<br />
const picker = new ColourPicker(myElement);<br />
</syntaxhighlight><br />
== Embedding AMD code in a page ==<br />
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters. <br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd($modulename, $functionname, $params);<br />
</syntaxhighlight><br />
that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.<br />
Notes:<br />
* the $modulename is the 'componentname/modulename' discussed above<br />
* the $functionname is the name of a public function exposed by the amd module. <br />
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please). <br />
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.<br />
AMD / JS code can also be embedded on a page via mustache templates<br />
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F<br />
== Troubleshooting ==<br />
=== npm-shrinkwrap.json sha1 / sha512 changes ===<br />
If grunt changes all the hashes in npm-shrinkwrap.json then try this:<br />
rm -rf node_modules && npm i<br />
== But I have a mega JS file I don't want loaded on every page? ==<br />
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.<br />
== Useful links ==<br />
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)<br />
* [[Useful_core_Javascript_modules]]<br />
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau<br />
*[https://moodle.org/mod/forum/discuss.php?d=378112#p1524459 How to get variables from PHP into javascript AMD modules in M3.5] Justin Hunt, on Moodle forums.<br />
*MDL-67327 JavaScript issues when not following the official documentation, since Moodle 3.8<br />
*[https://moodle.org/mod/forum/discuss.php?d=405829 Error from grunt watch - Moodle 3.9] Forum Discussion<br />
[[Category:AJAX]]<br />
[[Category:Javascript]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Javascript_Modules&diff=61757Javascript Modules2022-03-02T09:32:47Z<p>Tim+Hunt: /* Install grunt */</p>
<hr />
<div>{{Moodle 2.9}}<br />
= Javascript Modules =<br />
== What is a Javascript module and why do I care? ==<br />
A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript. <br />
== Why should I package my code as a module? ==<br />
By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:<br />
<br />
a) Each smaller piece is simpler to understand / debug<br />
<br />
b) Each smaller piece is simpler to test<br />
<br />
c) You can re-use common code instead of duplicating it<br />
= How do I write a Javascript module in Moodle? =<br />
Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format. <br />
<br />
To edit or create an AMD module in Moodle you need to do a couple of things. <br />
<br />
Since version 3.8, Moodle supports [https://github.com/lukehoban/es6features#readme ECMAScript 2015 features] (aka ES6) in a cross browser compatible way thanks to [https://babeljs.io/ Babel JS]. In order to achieve the compatibility with older browsers Babel will compile the newer ES6 features back into ES5 Javascript. Unfortunately this means that in order for your Javascript changes to show in the browser they must be compiled by running [[Grunt]], even with the cachejs config setting set to false (i.e. "Development mode").<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module '''must''' be written on ES6.<br />
== Install NVM and Node ==<br />
The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.<br />
<br />
For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating<br />
<br />
For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)<br />
<br />
Confirm it is working (version below in on Linux, and probably not current):<br />
$ nvm --version<br />
0.35.3<br />
After you have installed '''nvm''', you should install the correct version of NodeJS by running the following commands from your Moodle directory:<br />
nvm install<br />
nvm use<br />
If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:<br />
nvm alias default {{NodeJSExactVersion}}<br />
== Install grunt ==<br />
The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.<br />
<br />
Once this is done, you can run the the following commands from your Moodle directory:<br />
npm install<br />
'''This may mention vulnerabilities, that's fine and doesn't apply.'''<br />
npm install -g grunt-cli<br />
Troubleshooting: on Mac, if you get weird errors, try running <code>sudo xcode-select --reset</code>.<br />
<br />
== Development mode (Moodle v2.9 to v3.7) ==<br />
To avoid having to constantly run grunt, make sure you set the following in your config.php<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!<br />
<br />
In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.<br />
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(<br />
== Development mode (Moodle v3.8 and above) ==<br />
All Javascript code is now compiled using Babel which means Moodle will only ever serve minified Javascript to the browser, even in development mode. However in development mode Moodle will also send the browser the corresponding source map files for each of the Javascript modules. The source map files will tell the browser how to map the minified source code back to the unminified original source code so that the original source files will be displayed in the sources section of the browser's development tools.<br />
<br />
While in development mode each of the Javascript modules will appear in the browser's source tree as separate modules (no more giant first.js file!) and they will also be loaded with individual network requests (this is a compromise we had to make thanks to some browser bugs with source map files).<br />
<br />
To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Since all Javascript must now be compiled you must run [[Grunt]] in order for you changes to appear in the browser. However rather than running Grunt manually each time on either the whole project or each file you modified, it is recommended that you just run the '''grunt watch''' task at the root of your Moodle directory. The grunt watch task will listen for changes to the Javascript files in the Moodle directory and will automatically lint and compile only the file that is changed after each change is detected. This removes the need to manually run grunt after each change.<br />
== Development mode (Moodle v3.10 and above) ==<br />
All the above for Moodle 3.8 and up applies, plus (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
== Running grunt ==<br />
You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.<br />
<br />
See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.<br />
<br />
If you get the error message<br />
/usr/bin/env: node: No such file or directory<br />
Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911<br />
<br />
On Ubuntu 14.04 this fixed it for me:<br />
sudo ln -fs /usr/bin/nodejs /usr/local/bin/node<br />
Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.<br />
== ES6 Modules (Moodle v3.8 and above) ==<br />
In addition to AMD module syntax Moodle now supports the [https://github.com/lukehoban/es6features#modules ES6 syntax] for writing Javascript modules. All modules (defined using either syntax) are compatible with one another. Behind the scenes the ES6 module syntax is converted into an AMD syntax as part of the Babel compiling process.<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
<br />
The call from a PHP file takes the same format<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('myplugin/myfile','init');<br />
</syntaxhighlight><br />
And a minimal ES6 file will work with <br />
<syntaxhighlight lang="php"><br />
export const init = () => {<br />
window.console.log('we have been started');<br />
};<br />
</syntaxhighlight><br />
=== Export default ===<br />
There is one slight difference between the ES6 definition for exporting modules and the RequireJS (AMD) definition.<br />
<br />
ES6 allows you to export a “default” value which is actually no different to exporting a named value where the name is “default”. Unfortunately, RequireJS allows for unnamed default exports (e.g. you can do "return SomeClass;") which can be imported by just requiring them in other AMD modules.<br />
<br />
That’s a bit confusing, get to the point! Well, it basically means that in Moodle you won’t be able to write an ES6 module that exports both a default and named exports, e.g. "export default function() {...}" and "export const FOO = 'bar'" in the same module. The export default will simply override all other exports in that module.<br />
=== Inline Javascript ===<br />
Another important note is that ES6 support is only for stand alone Javascript files because it relies on the compilation from Babel and Grunt. That means any inline Javascript (either in PHP or in Mustache templates) won't support the ES6 features. Instead it would be best to keep the inline Javascript as minimal as possible and only use it to load a stand alone Javascript module.<br />
== Minimum (getting started) module for plugins ==<br />
This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...<br />
<syntaxhighlight lang="javascript"><br />
// Put this file in path/to/plugin/amd/src<br />
// You can call it anything you like<br />
<br />
export const init = () => {<br />
document.addEventListener('change', e => {<br />
const someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
};<br />
</syntaxhighlight><br />
For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:<br />
<syntaxhighlight lang="javascript"><br />
define([], function() {<br />
<br />
return {<br />
init: function() {<br />
document.addEventListener('change', function(e) {<br />
var someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
}<br />
};<br />
});<br />
</syntaxhighlight><br />
This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,<br />
<syntaxhighlight lang="javascript"><br />
import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.<br />
import * as Str from 'core/str';<br />
import Ajax from 'core/ajax';<br />
<br />
export const init = config => {<br />
};<br />
</syntaxhighlight><br />
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');<br />
</syntaxhighlight><br />
Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed. <br />
<br />
js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));<br />
</syntaxhighlight><br />
...calls<br />
<syntaxhighlight lang="javascript"><br />
export const init = (first, last) {<br />
window.console.log(`The first name was '${first}' and the last name was '${last}'`);<br />
};<br />
</syntaxhighlight><br />
A more comprehensive explanation follows...<br />
== "Hello World" I am a Javascript Module ==<br />
Lets now create a simple Javascript module so we can see how to lay things out. <br />
<br />
Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code. <br />
<br />
After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js). <br />
<br />
Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes. <br />
<br />
Lets create a simple module now:<br />
<br />
blocks/overview/amd/src/helloworld.js<br />
<syntaxhighlight lang="javascript"><br />
// Standard license block omitted.<br />
/*<br />
* @module block_overview/helloworld<br />
* @copyright 2015 Someone cool<br />
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later<br />
*/<br />
<br />
import * as Str from 'core/str';<br />
<br />
/**<br />
* Reveal all of the hidden notes.<br />
*/<br />
const showAllNotes = () => {<br />
document.querySelectorAll('.note.hidden').map(note => note.removeClass('hidden'));<br />
};<br />
<br />
/**<br />
* Hide all of the notes.<br />
*/<br />
const hideAllNotes = () => document.querySelectorAll('.note').map(note => note.addClass('hidden'));<br />
<br />
/**<br />
* Return a personalised, formal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const formal = name => Str.get_string('formallygreet', 'block_overview', name);<br />
<br />
/**<br />
* Return a personalised, informal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const informal = name => {<br />
return Str.get_string('informallygreet', 'block_overview', name);<br />
};<br />
</syntaxhighlight><br />
It's important to note tha tonly functions which are exported will be callable from outside the module. These are part of the public API.<br />
== Loading modules dynamically ==<br />
What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.<br />
<syntaxhighlight lang="javascript"><br />
export const showTheThing = thingToShow => {<br />
// Load the module for this thing.<br />
import(`local_examples/local/types/type_${thingToShow.modname}`)<br />
.then(thingModule => {<br />
window.console.log(`The ${thingToShow.modname} is now available under thingModule within this scope`);<br />
<br />
return thingModule;<br />
});<br />
};<br />
</syntaxhighlight><br />
== Including an external javascript/jquery library ==<br />
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:<br />
<br />
'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''<br />
e.g. <br />
<syntaxhighlight lang="javascript"><br />
// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE<br />
define("typeahead.js", *[ "jquery" ], function(a0) {<br />
return factory(a0);<br />
});<br />
</syntaxhighlight><br />
will not work, as moodle injects it's own define name when loading the library.<br />
<br />
If the library is in AMD format and has a define:<br />
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )<br />
* download the module in both normal and minified versions<br />
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir<br />
* /theme/mytheme/amd/src/jquery.countdown.js<br />
you can now include the module and initialise it (there are multiple ways to do this)<br />
php:<br />
<br />
1. Create your own AMD module and initialise it:<br />
<br />
In your PHP file:<br />
<syntaxhighlight lang="php"><br />
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);<br />
</syntaxhighlight><br />
Javascript module:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/amd/src/countdowntimer.js<br />
import Countdown from 'theme_mytheme/jquery.countdown');<br />
import $ from 'jquery';<br />
<br />
export const init = params => {<br />
$('#clock').countdown(params.targetItem, event => {<br />
$(event.target).html(event.strftime('%D days %H:%M:%S'));<br />
});<br />
};<br />
</syntaxhighlight><br />
2. Call your Javascript module from your template:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/templates/countdowntimer.mustache<br />
<span id="theme_mytheme-clock-{{uniqid}}"></span><br />
{{#js}}<br />
require(['theme_mytheme/countdowntimer'], function(myModule) {<br />
myModule.init({<br />
targetItem: 'theme_mytheme-clock-{{uniqid}}'<br />
});<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
Note: If you feel that you need to work around MDL-62468, then you should probably be putting the data into the DOM in your template via data Attributes, or loading it via a Web Service.<br />
<br />
Another example of adding a 3rd-party library to a Moodle plugin (by Ruslan Kabalin)<br />
<br />
If you want use https://github.com/R-TEK/colr_pickr in your plugin but this module isn't RequireJS-compatible.<br />
<br />
You need to configure requirejs in your plugin to use third-party library:<br />
<syntaxhighlight lang="php"><br />
$config = ['paths' => ['colorpicker' => 'CDN or local path...']];<br />
$requirejs = 'require.config(' . json_encode($config) . ')';<br />
$PAGE->requires->js_amd_inline($requirejs);<br />
</syntaxhighlight><br />
Then in your JS module in the plugin:<br />
<syntaxhighlight lang="javascript"><br />
define([colorpicker], function(ColorPicker) {<br />
const button = document.getElementById('my_picker');<br />
let picker = new ColorPicker(button, '#ff0000');<br />
}<br />
</syntaxhighlight><br />
And another example of using https://github.com/itsjavi/bootstrap-colorpicker (that has a [[jQuery]] dependency) with native ES6 JS:<br />
NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.<br />
<br><br />
<syntaxhighlight lang="javascript"><br />
import ColourPicker from 'local_myplugin/bootstrap-colorpicker';<br />
<br />
const myElement = document.querySelector('.myelement');<br />
const picker = new ColourPicker(myElement);<br />
</syntaxhighlight><br />
== Embedding AMD code in a page ==<br />
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters. <br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd($modulename, $functionname, $params);<br />
</syntaxhighlight><br />
that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.<br />
Notes:<br />
* the $modulename is the 'componentname/modulename' discussed above<br />
* the $functionname is the name of a public function exposed by the amd module. <br />
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please). <br />
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.<br />
AMD / JS code can also be embedded on a page via mustache templates<br />
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F<br />
== Troubleshooting ==<br />
=== npm-shrinkwrap.json sha1 / sha512 changes ===<br />
If grunt changes all the hashes in npm-shrinkwrap.json then try this:<br />
rm -rf node_modules && npm i<br />
== But I have a mega JS file I don't want loaded on every page? ==<br />
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.<br />
== Useful links ==<br />
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)<br />
* [[Useful_core_Javascript_modules]]<br />
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau<br />
*[https://moodle.org/mod/forum/discuss.php?d=378112#p1524459 How to get variables from PHP into javascript AMD modules in M3.5] Justin Hunt, on Moodle forums.<br />
*MDL-67327 JavaScript issues when not following the official documentation, since Moodle 3.8<br />
*[https://moodle.org/mod/forum/discuss.php?d=405829 Error from grunt watch - Moodle 3.9] Forum Discussion<br />
[[Category:AJAX]]<br />
[[Category:Javascript]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Javascript_Modules&diff=61756Javascript Modules2022-03-02T09:30:22Z<p>Tim+Hunt: /* Install NVM and Node */</p>
<hr />
<div>{{Moodle 2.9}}<br />
= Javascript Modules =<br />
== What is a Javascript module and why do I care? ==<br />
A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript. <br />
== Why should I package my code as a module? ==<br />
By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:<br />
<br />
a) Each smaller piece is simpler to understand / debug<br />
<br />
b) Each smaller piece is simpler to test<br />
<br />
c) You can re-use common code instead of duplicating it<br />
= How do I write a Javascript module in Moodle? =<br />
Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format. <br />
<br />
To edit or create an AMD module in Moodle you need to do a couple of things. <br />
<br />
Since version 3.8, Moodle supports [https://github.com/lukehoban/es6features#readme ECMAScript 2015 features] (aka ES6) in a cross browser compatible way thanks to [https://babeljs.io/ Babel JS]. In order to achieve the compatibility with older browsers Babel will compile the newer ES6 features back into ES5 Javascript. Unfortunately this means that in order for your Javascript changes to show in the browser they must be compiled by running [[Grunt]], even with the cachejs config setting set to false (i.e. "Development mode").<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module '''must''' be written on ES6.<br />
== Install NVM and Node ==<br />
The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.<br />
<br />
For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating<br />
<br />
For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)<br />
<br />
Confirm it is working (version below in on Linux, and probably not current):<br />
$ nvm --version<br />
0.35.3<br />
After you have installed '''nvm''', you should install the correct version of NodeJS by running the following commands from your Moodle directory:<br />
nvm install<br />
nvm use<br />
If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:<br />
nvm alias default {{NodeJSExactVersion}}<br />
<br />
== Install grunt ==<br />
The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.<br />
<br />
Once this is done, you can run the the following commands from your Moodle directory:<br />
npm install<br />
'''This may mention vulnerabilities, that's fine and doesn't apply.'''<br />
npm install -g grunt-cli<br />
== Development mode (Moodle v2.9 to v3.7) ==<br />
To avoid having to constantly run grunt, make sure you set the following in your config.php<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!<br />
<br />
In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.<br />
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(<br />
== Development mode (Moodle v3.8 and above) ==<br />
All Javascript code is now compiled using Babel which means Moodle will only ever serve minified Javascript to the browser, even in development mode. However in development mode Moodle will also send the browser the corresponding source map files for each of the Javascript modules. The source map files will tell the browser how to map the minified source code back to the unminified original source code so that the original source files will be displayed in the sources section of the browser's development tools.<br />
<br />
While in development mode each of the Javascript modules will appear in the browser's source tree as separate modules (no more giant first.js file!) and they will also be loaded with individual network requests (this is a compromise we had to make thanks to some browser bugs with source map files).<br />
<br />
To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Since all Javascript must now be compiled you must run [[Grunt]] in order for you changes to appear in the browser. However rather than running Grunt manually each time on either the whole project or each file you modified, it is recommended that you just run the '''grunt watch''' task at the root of your Moodle directory. The grunt watch task will listen for changes to the Javascript files in the Moodle directory and will automatically lint and compile only the file that is changed after each change is detected. This removes the need to manually run grunt after each change.<br />
== Development mode (Moodle v3.10 and above) ==<br />
All the above for Moodle 3.8 and up applies, plus (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
== Running grunt ==<br />
You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.<br />
<br />
See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.<br />
<br />
If you get the error message<br />
/usr/bin/env: node: No such file or directory<br />
Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911<br />
<br />
On Ubuntu 14.04 this fixed it for me:<br />
sudo ln -fs /usr/bin/nodejs /usr/local/bin/node<br />
Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.<br />
== ES6 Modules (Moodle v3.8 and above) ==<br />
In addition to AMD module syntax Moodle now supports the [https://github.com/lukehoban/es6features#modules ES6 syntax] for writing Javascript modules. All modules (defined using either syntax) are compatible with one another. Behind the scenes the ES6 module syntax is converted into an AMD syntax as part of the Babel compiling process.<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
<br />
The call from a PHP file takes the same format<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('myplugin/myfile','init');<br />
</syntaxhighlight><br />
And a minimal ES6 file will work with <br />
<syntaxhighlight lang="php"><br />
export const init = () => {<br />
window.console.log('we have been started');<br />
};<br />
</syntaxhighlight><br />
=== Export default ===<br />
There is one slight difference between the ES6 definition for exporting modules and the RequireJS (AMD) definition.<br />
<br />
ES6 allows you to export a “default” value which is actually no different to exporting a named value where the name is “default”. Unfortunately, RequireJS allows for unnamed default exports (e.g. you can do "return SomeClass;") which can be imported by just requiring them in other AMD modules.<br />
<br />
That’s a bit confusing, get to the point! Well, it basically means that in Moodle you won’t be able to write an ES6 module that exports both a default and named exports, e.g. "export default function() {...}" and "export const FOO = 'bar'" in the same module. The export default will simply override all other exports in that module.<br />
=== Inline Javascript ===<br />
Another important note is that ES6 support is only for stand alone Javascript files because it relies on the compilation from Babel and Grunt. That means any inline Javascript (either in PHP or in Mustache templates) won't support the ES6 features. Instead it would be best to keep the inline Javascript as minimal as possible and only use it to load a stand alone Javascript module.<br />
== Minimum (getting started) module for plugins ==<br />
This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...<br />
<syntaxhighlight lang="javascript"><br />
// Put this file in path/to/plugin/amd/src<br />
// You can call it anything you like<br />
<br />
export const init = () => {<br />
document.addEventListener('change', e => {<br />
const someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
};<br />
</syntaxhighlight><br />
For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:<br />
<syntaxhighlight lang="javascript"><br />
define([], function() {<br />
<br />
return {<br />
init: function() {<br />
document.addEventListener('change', function(e) {<br />
var someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
}<br />
};<br />
});<br />
</syntaxhighlight><br />
This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,<br />
<syntaxhighlight lang="javascript"><br />
import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.<br />
import * as Str from 'core/str';<br />
import Ajax from 'core/ajax';<br />
<br />
export const init = config => {<br />
};<br />
</syntaxhighlight><br />
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');<br />
</syntaxhighlight><br />
Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed. <br />
<br />
js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));<br />
</syntaxhighlight><br />
...calls<br />
<syntaxhighlight lang="javascript"><br />
export const init = (first, last) {<br />
window.console.log(`The first name was '${first}' and the last name was '${last}'`);<br />
};<br />
</syntaxhighlight><br />
A more comprehensive explanation follows...<br />
== "Hello World" I am a Javascript Module ==<br />
Lets now create a simple Javascript module so we can see how to lay things out. <br />
<br />
Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code. <br />
<br />
After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js). <br />
<br />
Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes. <br />
<br />
Lets create a simple module now:<br />
<br />
blocks/overview/amd/src/helloworld.js<br />
<syntaxhighlight lang="javascript"><br />
// Standard license block omitted.<br />
/*<br />
* @module block_overview/helloworld<br />
* @copyright 2015 Someone cool<br />
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later<br />
*/<br />
<br />
import * as Str from 'core/str';<br />
<br />
/**<br />
* Reveal all of the hidden notes.<br />
*/<br />
const showAllNotes = () => {<br />
document.querySelectorAll('.note.hidden').map(note => note.removeClass('hidden'));<br />
};<br />
<br />
/**<br />
* Hide all of the notes.<br />
*/<br />
const hideAllNotes = () => document.querySelectorAll('.note').map(note => note.addClass('hidden'));<br />
<br />
/**<br />
* Return a personalised, formal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const formal = name => Str.get_string('formallygreet', 'block_overview', name);<br />
<br />
/**<br />
* Return a personalised, informal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const informal = name => {<br />
return Str.get_string('informallygreet', 'block_overview', name);<br />
};<br />
</syntaxhighlight><br />
It's important to note tha tonly functions which are exported will be callable from outside the module. These are part of the public API.<br />
== Loading modules dynamically ==<br />
What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.<br />
<syntaxhighlight lang="javascript"><br />
export const showTheThing = thingToShow => {<br />
// Load the module for this thing.<br />
import(`local_examples/local/types/type_${thingToShow.modname}`)<br />
.then(thingModule => {<br />
window.console.log(`The ${thingToShow.modname} is now available under thingModule within this scope`);<br />
<br />
return thingModule;<br />
});<br />
};<br />
</syntaxhighlight><br />
== Including an external javascript/jquery library ==<br />
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:<br />
<br />
'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''<br />
e.g. <br />
<syntaxhighlight lang="javascript"><br />
// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE<br />
define("typeahead.js", *[ "jquery" ], function(a0) {<br />
return factory(a0);<br />
});<br />
</syntaxhighlight><br />
will not work, as moodle injects it's own define name when loading the library.<br />
<br />
If the library is in AMD format and has a define:<br />
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )<br />
* download the module in both normal and minified versions<br />
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir<br />
* /theme/mytheme/amd/src/jquery.countdown.js<br />
you can now include the module and initialise it (there are multiple ways to do this)<br />
php:<br />
<br />
1. Create your own AMD module and initialise it:<br />
<br />
In your PHP file:<br />
<syntaxhighlight lang="php"><br />
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);<br />
</syntaxhighlight><br />
Javascript module:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/amd/src/countdowntimer.js<br />
import Countdown from 'theme_mytheme/jquery.countdown');<br />
import $ from 'jquery';<br />
<br />
export const init = params => {<br />
$('#clock').countdown(params.targetItem, event => {<br />
$(event.target).html(event.strftime('%D days %H:%M:%S'));<br />
});<br />
};<br />
</syntaxhighlight><br />
2. Call your Javascript module from your template:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/templates/countdowntimer.mustache<br />
<span id="theme_mytheme-clock-{{uniqid}}"></span><br />
{{#js}}<br />
require(['theme_mytheme/countdowntimer'], function(myModule) {<br />
myModule.init({<br />
targetItem: 'theme_mytheme-clock-{{uniqid}}'<br />
});<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
Note: If you feel that you need to work around MDL-62468, then you should probably be putting the data into the DOM in your template via data Attributes, or loading it via a Web Service.<br />
<br />
Another example of adding a 3rd-party library to a Moodle plugin (by Ruslan Kabalin)<br />
<br />
If you want use https://github.com/R-TEK/colr_pickr in your plugin but this module isn't RequireJS-compatible.<br />
<br />
You need to configure requirejs in your plugin to use third-party library:<br />
<syntaxhighlight lang="php"><br />
$config = ['paths' => ['colorpicker' => 'CDN or local path...']];<br />
$requirejs = 'require.config(' . json_encode($config) . ')';<br />
$PAGE->requires->js_amd_inline($requirejs);<br />
</syntaxhighlight><br />
Then in your JS module in the plugin:<br />
<syntaxhighlight lang="javascript"><br />
define([colorpicker], function(ColorPicker) {<br />
const button = document.getElementById('my_picker');<br />
let picker = new ColorPicker(button, '#ff0000');<br />
}<br />
</syntaxhighlight><br />
And another example of using https://github.com/itsjavi/bootstrap-colorpicker (that has a [[jQuery]] dependency) with native ES6 JS:<br />
NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.<br />
<br><br />
<syntaxhighlight lang="javascript"><br />
import ColourPicker from 'local_myplugin/bootstrap-colorpicker';<br />
<br />
const myElement = document.querySelector('.myelement');<br />
const picker = new ColourPicker(myElement);<br />
</syntaxhighlight><br />
== Embedding AMD code in a page ==<br />
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters. <br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd($modulename, $functionname, $params);<br />
</syntaxhighlight><br />
that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.<br />
Notes:<br />
* the $modulename is the 'componentname/modulename' discussed above<br />
* the $functionname is the name of a public function exposed by the amd module. <br />
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please). <br />
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.<br />
AMD / JS code can also be embedded on a page via mustache templates<br />
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F<br />
== Troubleshooting ==<br />
=== npm-shrinkwrap.json sha1 / sha512 changes ===<br />
If grunt changes all the hashes in npm-shrinkwrap.json then try this:<br />
rm -rf node_modules && npm i<br />
== But I have a mega JS file I don't want loaded on every page? ==<br />
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.<br />
== Useful links ==<br />
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)<br />
* [[Useful_core_Javascript_modules]]<br />
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau<br />
*[https://moodle.org/mod/forum/discuss.php?d=378112#p1524459 How to get variables from PHP into javascript AMD modules in M3.5] Justin Hunt, on Moodle forums.<br />
*MDL-67327 JavaScript issues when not following the official documentation, since Moodle 3.8<br />
*[https://moodle.org/mod/forum/discuss.php?d=405829 Error from grunt watch - Moodle 3.9] Forum Discussion<br />
[[Category:AJAX]]<br />
[[Category:Javascript]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Javascript_Modules&diff=61755Javascript Modules2022-03-02T09:30:08Z<p>Tim+Hunt: /* Install NVM and Node */</p>
<hr />
<div>{{Moodle 2.9}}<br />
= Javascript Modules =<br />
== What is a Javascript module and why do I care? ==<br />
A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript. <br />
== Why should I package my code as a module? ==<br />
By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:<br />
<br />
a) Each smaller piece is simpler to understand / debug<br />
<br />
b) Each smaller piece is simpler to test<br />
<br />
c) You can re-use common code instead of duplicating it<br />
= How do I write a Javascript module in Moodle? =<br />
Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format. <br />
<br />
To edit or create an AMD module in Moodle you need to do a couple of things. <br />
<br />
Since version 3.8, Moodle supports [https://github.com/lukehoban/es6features#readme ECMAScript 2015 features] (aka ES6) in a cross browser compatible way thanks to [https://babeljs.io/ Babel JS]. In order to achieve the compatibility with older browsers Babel will compile the newer ES6 features back into ES5 Javascript. Unfortunately this means that in order for your Javascript changes to show in the browser they must be compiled by running [[Grunt]], even with the cachejs config setting set to false (i.e. "Development mode").<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module '''must''' be written on ES6.<br />
== Install NVM and Node ==<br />
The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.<br />
<br />
For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating<br />
For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)<br />
<br />
Confirm it is working (version below in on Linux, and probably not current):<br />
$ nvm --version<br />
0.35.3<br />
After you have installed '''nvm''', you should install the correct version of NodeJS by running the following commands from your Moodle directory:<br />
nvm install<br />
nvm use<br />
If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:<br />
nvm alias default {{NodeJSExactVersion}}<br />
<br />
== Install grunt ==<br />
The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.<br />
<br />
Once this is done, you can run the the following commands from your Moodle directory:<br />
npm install<br />
'''This may mention vulnerabilities, that's fine and doesn't apply.'''<br />
npm install -g grunt-cli<br />
== Development mode (Moodle v2.9 to v3.7) ==<br />
To avoid having to constantly run grunt, make sure you set the following in your config.php<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!<br />
<br />
In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.<br />
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(<br />
== Development mode (Moodle v3.8 and above) ==<br />
All Javascript code is now compiled using Babel which means Moodle will only ever serve minified Javascript to the browser, even in development mode. However in development mode Moodle will also send the browser the corresponding source map files for each of the Javascript modules. The source map files will tell the browser how to map the minified source code back to the unminified original source code so that the original source files will be displayed in the sources section of the browser's development tools.<br />
<br />
While in development mode each of the Javascript modules will appear in the browser's source tree as separate modules (no more giant first.js file!) and they will also be loaded with individual network requests (this is a compromise we had to make thanks to some browser bugs with source map files).<br />
<br />
To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Since all Javascript must now be compiled you must run [[Grunt]] in order for you changes to appear in the browser. However rather than running Grunt manually each time on either the whole project or each file you modified, it is recommended that you just run the '''grunt watch''' task at the root of your Moodle directory. The grunt watch task will listen for changes to the Javascript files in the Moodle directory and will automatically lint and compile only the file that is changed after each change is detected. This removes the need to manually run grunt after each change.<br />
== Development mode (Moodle v3.10 and above) ==<br />
All the above for Moodle 3.8 and up applies, plus (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
== Running grunt ==<br />
You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.<br />
<br />
See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.<br />
<br />
If you get the error message<br />
/usr/bin/env: node: No such file or directory<br />
Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911<br />
<br />
On Ubuntu 14.04 this fixed it for me:<br />
sudo ln -fs /usr/bin/nodejs /usr/local/bin/node<br />
Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.<br />
== ES6 Modules (Moodle v3.8 and above) ==<br />
In addition to AMD module syntax Moodle now supports the [https://github.com/lukehoban/es6features#modules ES6 syntax] for writing Javascript modules. All modules (defined using either syntax) are compatible with one another. Behind the scenes the ES6 module syntax is converted into an AMD syntax as part of the Babel compiling process.<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
<br />
The call from a PHP file takes the same format<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('myplugin/myfile','init');<br />
</syntaxhighlight><br />
And a minimal ES6 file will work with <br />
<syntaxhighlight lang="php"><br />
export const init = () => {<br />
window.console.log('we have been started');<br />
};<br />
</syntaxhighlight><br />
=== Export default ===<br />
There is one slight difference between the ES6 definition for exporting modules and the RequireJS (AMD) definition.<br />
<br />
ES6 allows you to export a “default” value which is actually no different to exporting a named value where the name is “default”. Unfortunately, RequireJS allows for unnamed default exports (e.g. you can do "return SomeClass;") which can be imported by just requiring them in other AMD modules.<br />
<br />
That’s a bit confusing, get to the point! Well, it basically means that in Moodle you won’t be able to write an ES6 module that exports both a default and named exports, e.g. "export default function() {...}" and "export const FOO = 'bar'" in the same module. The export default will simply override all other exports in that module.<br />
=== Inline Javascript ===<br />
Another important note is that ES6 support is only for stand alone Javascript files because it relies on the compilation from Babel and Grunt. That means any inline Javascript (either in PHP or in Mustache templates) won't support the ES6 features. Instead it would be best to keep the inline Javascript as minimal as possible and only use it to load a stand alone Javascript module.<br />
== Minimum (getting started) module for plugins ==<br />
This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...<br />
<syntaxhighlight lang="javascript"><br />
// Put this file in path/to/plugin/amd/src<br />
// You can call it anything you like<br />
<br />
export const init = () => {<br />
document.addEventListener('change', e => {<br />
const someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
};<br />
</syntaxhighlight><br />
For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:<br />
<syntaxhighlight lang="javascript"><br />
define([], function() {<br />
<br />
return {<br />
init: function() {<br />
document.addEventListener('change', function(e) {<br />
var someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
}<br />
};<br />
});<br />
</syntaxhighlight><br />
This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,<br />
<syntaxhighlight lang="javascript"><br />
import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.<br />
import * as Str from 'core/str';<br />
import Ajax from 'core/ajax';<br />
<br />
export const init = config => {<br />
};<br />
</syntaxhighlight><br />
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');<br />
</syntaxhighlight><br />
Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed. <br />
<br />
js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));<br />
</syntaxhighlight><br />
...calls<br />
<syntaxhighlight lang="javascript"><br />
export const init = (first, last) {<br />
window.console.log(`The first name was '${first}' and the last name was '${last}'`);<br />
};<br />
</syntaxhighlight><br />
A more comprehensive explanation follows...<br />
== "Hello World" I am a Javascript Module ==<br />
Lets now create a simple Javascript module so we can see how to lay things out. <br />
<br />
Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code. <br />
<br />
After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js). <br />
<br />
Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes. <br />
<br />
Lets create a simple module now:<br />
<br />
blocks/overview/amd/src/helloworld.js<br />
<syntaxhighlight lang="javascript"><br />
// Standard license block omitted.<br />
/*<br />
* @module block_overview/helloworld<br />
* @copyright 2015 Someone cool<br />
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later<br />
*/<br />
<br />
import * as Str from 'core/str';<br />
<br />
/**<br />
* Reveal all of the hidden notes.<br />
*/<br />
const showAllNotes = () => {<br />
document.querySelectorAll('.note.hidden').map(note => note.removeClass('hidden'));<br />
};<br />
<br />
/**<br />
* Hide all of the notes.<br />
*/<br />
const hideAllNotes = () => document.querySelectorAll('.note').map(note => note.addClass('hidden'));<br />
<br />
/**<br />
* Return a personalised, formal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const formal = name => Str.get_string('formallygreet', 'block_overview', name);<br />
<br />
/**<br />
* Return a personalised, informal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const informal = name => {<br />
return Str.get_string('informallygreet', 'block_overview', name);<br />
};<br />
</syntaxhighlight><br />
It's important to note tha tonly functions which are exported will be callable from outside the module. These are part of the public API.<br />
== Loading modules dynamically ==<br />
What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.<br />
<syntaxhighlight lang="javascript"><br />
export const showTheThing = thingToShow => {<br />
// Load the module for this thing.<br />
import(`local_examples/local/types/type_${thingToShow.modname}`)<br />
.then(thingModule => {<br />
window.console.log(`The ${thingToShow.modname} is now available under thingModule within this scope`);<br />
<br />
return thingModule;<br />
});<br />
};<br />
</syntaxhighlight><br />
== Including an external javascript/jquery library ==<br />
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:<br />
<br />
'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''<br />
e.g. <br />
<syntaxhighlight lang="javascript"><br />
// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE<br />
define("typeahead.js", *[ "jquery" ], function(a0) {<br />
return factory(a0);<br />
});<br />
</syntaxhighlight><br />
will not work, as moodle injects it's own define name when loading the library.<br />
<br />
If the library is in AMD format and has a define:<br />
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )<br />
* download the module in both normal and minified versions<br />
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir<br />
* /theme/mytheme/amd/src/jquery.countdown.js<br />
you can now include the module and initialise it (there are multiple ways to do this)<br />
php:<br />
<br />
1. Create your own AMD module and initialise it:<br />
<br />
In your PHP file:<br />
<syntaxhighlight lang="php"><br />
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);<br />
</syntaxhighlight><br />
Javascript module:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/amd/src/countdowntimer.js<br />
import Countdown from 'theme_mytheme/jquery.countdown');<br />
import $ from 'jquery';<br />
<br />
export const init = params => {<br />
$('#clock').countdown(params.targetItem, event => {<br />
$(event.target).html(event.strftime('%D days %H:%M:%S'));<br />
});<br />
};<br />
</syntaxhighlight><br />
2. Call your Javascript module from your template:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/templates/countdowntimer.mustache<br />
<span id="theme_mytheme-clock-{{uniqid}}"></span><br />
{{#js}}<br />
require(['theme_mytheme/countdowntimer'], function(myModule) {<br />
myModule.init({<br />
targetItem: 'theme_mytheme-clock-{{uniqid}}'<br />
});<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
Note: If you feel that you need to work around MDL-62468, then you should probably be putting the data into the DOM in your template via data Attributes, or loading it via a Web Service.<br />
<br />
Another example of adding a 3rd-party library to a Moodle plugin (by Ruslan Kabalin)<br />
<br />
If you want use https://github.com/R-TEK/colr_pickr in your plugin but this module isn't RequireJS-compatible.<br />
<br />
You need to configure requirejs in your plugin to use third-party library:<br />
<syntaxhighlight lang="php"><br />
$config = ['paths' => ['colorpicker' => 'CDN or local path...']];<br />
$requirejs = 'require.config(' . json_encode($config) . ')';<br />
$PAGE->requires->js_amd_inline($requirejs);<br />
</syntaxhighlight><br />
Then in your JS module in the plugin:<br />
<syntaxhighlight lang="javascript"><br />
define([colorpicker], function(ColorPicker) {<br />
const button = document.getElementById('my_picker');<br />
let picker = new ColorPicker(button, '#ff0000');<br />
}<br />
</syntaxhighlight><br />
And another example of using https://github.com/itsjavi/bootstrap-colorpicker (that has a [[jQuery]] dependency) with native ES6 JS:<br />
NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.<br />
<br><br />
<syntaxhighlight lang="javascript"><br />
import ColourPicker from 'local_myplugin/bootstrap-colorpicker';<br />
<br />
const myElement = document.querySelector('.myelement');<br />
const picker = new ColourPicker(myElement);<br />
</syntaxhighlight><br />
== Embedding AMD code in a page ==<br />
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters. <br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd($modulename, $functionname, $params);<br />
</syntaxhighlight><br />
that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.<br />
Notes:<br />
* the $modulename is the 'componentname/modulename' discussed above<br />
* the $functionname is the name of a public function exposed by the amd module. <br />
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please). <br />
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.<br />
AMD / JS code can also be embedded on a page via mustache templates<br />
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F<br />
== Troubleshooting ==<br />
=== npm-shrinkwrap.json sha1 / sha512 changes ===<br />
If grunt changes all the hashes in npm-shrinkwrap.json then try this:<br />
rm -rf node_modules && npm i<br />
== But I have a mega JS file I don't want loaded on every page? ==<br />
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.<br />
== Useful links ==<br />
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)<br />
* [[Useful_core_Javascript_modules]]<br />
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau<br />
*[https://moodle.org/mod/forum/discuss.php?d=378112#p1524459 How to get variables from PHP into javascript AMD modules in M3.5] Justin Hunt, on Moodle forums.<br />
*MDL-67327 JavaScript issues when not following the official documentation, since Moodle 3.8<br />
*[https://moodle.org/mod/forum/discuss.php?d=405829 Error from grunt watch - Moodle 3.9] Forum Discussion<br />
[[Category:AJAX]]<br />
[[Category:Javascript]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=History_of_the_Moodle_quiz_and_question_bank&diff=61734History of the Moodle quiz and question bank2022-02-15T15:12:59Z<p>Tim+Hunt: </p>
<hr />
<div>This is edited highlights from<br />
git log --no-merges --topo-order --reverse --format='%cd %h %s [%an]' --date=short --\<br />
mod/quiz question lib/questionlib.php admin/qtypes.php admin/qbehaviours.php<br />
(If you prefer, substitute <tt>gitk</tt> for <tt>git log</tt> in that.) Particularly significant changes have be put in bold, but this is somewhat arbitrary.<br />
<br />
In several cases, the first commit purporting to add a feature was pretty broken, or minimal, and then more work was done to fix it up and make it actually work. In these cases, generally I have just picked out the first commit mentioning a particular feature.<br />
<br />
The headings mark points in time, so the things between the Moodle 1.0 and Moodle 1.1 headings are features that are new in Moodle 1.1. The funny numbers after the date are the commit hashes. They are a link to that change on github.<br />
<br />
The changes have been classified according to whether they are primarily P - pedagogic, A - administrative or T - technical.<br />
<br />
At the moment, I was inconsistent with attributing credit for features. That is just sloppiness on my part, and hopefully I will fix it some day.--[[User:Tim Hunt|Tim Hunt]] 04:33, 12 April 2012 (WST)<br />
<br />
''Does anyone know when Gustav Delius started being quiz maintainer?''<br />
== Moodle 1.0 release 20 August 2002 ==<br />
* 2002-10-04 [https://github.com/moodle/moodle/commit/730fd187c825ca8e71bf78a130a4d7ca4e1785bb 730fd187] (PAT) '''First version of quiz module added''' by Martin Dougiamas. The first feature that anyone was paid to write for Moodle!<br />
* 2002-10-06 [https://github.com/moodle/moodle/commit/14d8c0b4099b0d331bf6e766eac046e2259e173a 14d8c0b4] (P) '''First three question types created, Multiple-Choice, Short answer and True/false.'''<br />
* 2002-10-13 [https://github.com/moodle/moodle/commit/579ddad5ef181299080f8d75641f392300649441 579ddad5] (PA) '''first, very basic, grades report added.'''<br />
* 2002-10-14 [https://github.com/moodle/moodle/commit/7bd1aa1d648e801bd21fb5fa3030ef9c902f33dd 7bd1aa1d] (A) first quiz editing UI<br />
* 2002-10-15 [https://github.com/moodle/moodle/commit/2a2c9725bbadd1e4391e03b54eafdab23ad18ae8 2a2c9725] (A) editing UI for the first three types.<br />
* 2002-10-18 [https://github.com/moodle/moodle/commit/958aafe2b419978eb03d4ea622c93224d28602c7 958aafe2] (A) tracking start and end time of attempts.<br />
* 2002-10-20 [https://github.com/moodle/moodle/commit/c74a0ca5c24473ccf5dc1ba9b8a5b44dcecb2fb9 c74a0ca5] (A) question category editing UI. (Note, categories cannot be nested, but note the the ides of published categories to allow sharing between courses already exists.)<br />
* 2002-10-21 [https://github.com/moodle/moodle/commit/e1c91df09b9dc71758fec06de2c4809faa9700ae e1c91df0] (A) allow questions to be deleted.<br />
* 2002-10-22 [https://github.com/moodle/moodle/commit/e331eb06fdbb4adc5ebce3cbf4aacda7ce7a5ed5 e331eb06] (A) regrading implemented<br />
* 2002-12-09 [https://github.com/moodle/moodle/commit/9307692fdfd9c41d8ff1799df7c87e2d8c1c8475 9307692f] (PA) JavaScript confirmation before submitting an attempt.<br />
* 2003-01-01 [https://github.com/moodle/moodle/commit/8e6c87ccf3c11b9e2ca7cfd222b6e2a0c67a93db 8e6c87cc] (PA) Teachers can enable students to review, but only after the quiz close date.<br />
* 2003-02-16 [https://github.com/moodle/moodle/commit/49220fa70cc90013773771727f0f36103a19f88b 49220fa7] (A) Framework for quiz import/export formats. Only one real format for now, missingword.<br />
* 2003-02-24 [https://github.com/moodle/moodle/commit/95dbc030a88308873fe0f97261bb0c847c364ad7 95dbc030] (P) '''Random short-answer match qtype added.'''<br />
* 2003-03-30 [https://github.com/moodle/moodle/commit/54a67a59218c7c5242a1398e5f3d08f23c9974d2 54a67a59] (P) '''Matching question type added.'''<br />
* 2003-04-09 [https://github.com/moodle/moodle/commit/34d52ad7d29675bc1f1c6275bddf896e262145be 34d52ad7] (P) '''Random questions added.'''<br />
* 2003-04-09 [https://github.com/moodle/moodle/commit/4b85b717128765ec207048e0006cdc25c10d7ac8 4b85b717] (P) Shuffle questions and shuffle answers features added.<br />
* 2003-05-02 [https://github.com/moodle/moodle/commit/c6bcd06abac61a6d15a8f9b4d4bb12090eb93bbb c6bcd06a] (A) AON and Blackboard import formats added.<br />
* 2003-07-06 [https://github.com/moodle/moodle/commit/401c8de6c55a348b3de7d2e8d785d59e1d5f6712 401c8de6] (P) '''Description question type added.'''<br />
* 2003-07-09 [https://github.com/moodle/moodle/commit/d7c93ec8fa8d11f63998ab9fd78c2c2f41045568 d7c93ec8] (A) Backup and restore added to the quiz.<br />
* 2003-07-10 [https://github.com/moodle/moodle/commit/361f649d7ad7ddf2d0af1932505a6dd316559fb6 361f649d] (P) '''Numerical qtype added.'''<br />
* 2003-07-24 [https://github.com/moodle/moodle/commit/29d5d0b40c31f1b589af9c91598676dae9b6444e 29d5d0b4] (T) Quiz reports made into a sort-of plugin.<br />
* 2003-07-24 [https://github.com/moodle/moodle/commit/c90f563e398f20b0cf473efb55bbf9b8ffb35420 c90f563e] (PA) simplestat report added.<br />
* 2003-07-28 [https://github.com/moodle/moodle/commit/250e71d96747693f40eb7db6eb40ba166b897a96 250e71d9] (A) countdown time when less than 24 hours from the close date.<br />
* 2003-08-01 [https://github.com/moodle/moodle/commit/8b439f8c164c15d39c3fa1bec029b616df5281dc 8b439f8c] (P) '''Multi-answer question type.'''<br />
* 2003-08-03 [https://github.com/moodle/moodle/commit/0f36ecb9ea9634c6b0732ebf06bc36707d3ecba6 0f36ecb9] (P) Each attempt builds on the last added<br />
== Moodle 1.1 release 29 August 2003 ==<br />
* 2003-09-10 [https://github.com/moodle/moodle/commit/ed1daaa9d7b5d7e1e8885854d7f2add117c4f24c ed1daaa9] (P) First support for ungraded quizzes.<br />
* 2003-10-15 [https://github.com/moodle/moodle/commit/857e0dfdd5ee3501eea54178829c094784bbd1f2 857e0dfd] (A) Course test manager import format.<br />
* 2003-11-20 [https://github.com/moodle/moodle/commit/565e970ee212aa5a355890ff85a14828b4bf735a 565e970e] (PA) fullstat report by Thomas Robb<br />
* 2003-11-20 [https://github.com/moodle/moodle/commit/7c9c2a8da68f420a8fa04ae1a90493a1dbe4f633 7c9c2a8d] (P) allow negative grades for multiple-choice.<br />
* 2003-12-01 [https://github.com/moodle/moodle/commit/0315927955b0877d957453ae617b527d3a70d453 03159279] (A) Aiken import format.<br />
* 2003-12-12 [https://github.com/moodle/moodle/commit/43bf9fc2d71450ec1fb91cd739814a5b20dad12a 43bf9fc2] (T) Improved plug-in formation for import/export formats.<br />
* 2003-12-12 [https://github.com/moodle/moodle/commit/43bf9fc2d71450ec1fb91cd739814a5b20dad12a 43bf9fc2] (A) '''GIFT format added.'''<br />
* 2003-12-29 [https://github.com/moodle/moodle/commit/0ce4aa1a8a381f2014d46e6ee5b04db1bdef8e23 0ce4aa1a] (P) Short-answer qtype enhanced to allow wild-cards.<br />
* 2004-01-11 [https://github.com/moodle/moodle/commit/998ebd420ab6c71aa1ac555287ce7ffcd4db8672 998ebd42] (A) WebCT import format added.<br />
* 2004-01-13 [https://github.com/moodle/moodle/commit/a9981ba6194c438aace048e9fc3f8130a3155542 a9981ba6] (A) Matching questions added to GIFT format<br />
* 2004-02-14 [https://github.com/moodle/moodle/commit/831b236f2c68b252203dcf4a9ad68a7191fbfc16 831b236f] (A) Groups support added to the quiz reports.<br />
* 2004-02-16 [https://github.com/moodle/moodle/commit/bbcbc0fecc7f8c7f5b71424864bdef4f1b540c17 bbcbc0fe] (P) '''First version of lesson module added.'''<br />
== Moodle 1.2 release 20 March 2004 ==<br />
* 2004-05-19 [https://github.com/moodle/moodle/commit/56215ed40f5f46aa0d1943585784e7327ea724e7 56215ed4] (A) Warn teachers if they are editing a quiz with attempts.<br />
== Moodle 1.3 release 25 May 2004 ==<br />
* 2004-06-02 [https://github.com/moodle/moodle/commit/f41e824f33414e6184611a6d1708cd3a58ec9058 f41e824f] (PA) Time limit feature added.<br />
* 2004-07-07 [https://github.com/moodle/moodle/commit/88c898f590b12bbb6bcff1c7e482669e17ab5115 88c898f5] (A) Password and subnet restrictions added.<br />
* 2004-07-21 [https://github.com/moodle/moodle/commit/8966a111310d0cc1c7012d68bcd137a5bafdf11f 8966a111] (T) '''Question types made plug-ins''', although still within mod/quiz.<br />
* 2004-07-30 [https://github.com/moodle/moodle/commit/8c5a95facbeff21a356396a588446ed77713cb9e 8c5a95fa] (P) '''Calculated question type added.'''<br />
* 2004-07-30 [https://github.com/moodle/moodle/commit/7a82d193240ab6a3df435ac2c89821864d5d2ee4 7a82d193] (P) '''Units added to numerical (and calculate) question types.'''<br />
* 2004-08-06 [https://github.com/moodle/moodle/commit/bbb4e32d3c07fa2192f54cebddf677d9938bf8b1 bbb4e32d] (A) '''Moodle XML export format added.'''<br />
* 2004-08-16 [https://github.com/moodle/moodle/commit/9c8047cfd07c5da2393720063949f448cd185c07 9c8047cf] (PA) '''Question preview feature added.'''<br />
== Moodle 1.4 release 31 August 2004 ==<br />
* 2004-12-16 [https://github.com/moodle/moodle/commit/6c83959e33ddd8978aa2a88af4f47bfeb97af5d4 6c83959e] (A) 'Secure pop-up' mode added.<br />
* 2004-12-16 [https://github.com/moodle/moodle/commit/d6b3c7b82e9f385daf6f9d642e8112a6bc7298ce d6b3c7b8] (A) Moodle XML export added.<br />
* 2004-12-23 [https://github.com/moodle/moodle/commit/a5c0990e5d5477f743dddd234312e0cf5223e22e a5c0990e] (A) Config page to allow admins to set default quiz options.<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/34283aa87d2a37fd237723c24c8da2b93a5bbec2 34283aa8] (A) 'Show advanced' button added to the quiz settings form. (Copying what is already done in the Resource module.)<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/34283aa87d2a37fd237723c24c8da2b93a5bbec2 34283aa8] (PA) Start of more sophisticated review options.<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/ac27e47dc48dbe82b19e24ae59e281b74e758213 ac27e47d] (A) Hierarchical question categories.<br />
* 2005-01-03 [https://github.com/moodle/moodle/commit/d70ccc495ca904789940f281655b94d9a8e8637b d70ccc49] (P) Multi-page quizzes allowed<br />
* 2005-01-25 [https://github.com/moodle/moodle/commit/1680925333d35cb0ed0209f3b5c27fc681c9d278 16809253] (A) Learnwise question import format<br />
* 2005-02-01 [https://github.com/moodle/moodle/commit/bdfa14dd7f34ada369dc430dc1f9f82dcc93b7dc bdfa14dd] (PA) Allow blocks on the quiz view page<br />
* 2005-02-14 [https://github.com/moodle/moodle/commit/72036f9305517224f9bdc67771f2bfde93c143a2 72036f93] (A) Now a teacher option for number of decimal points to show for grades.<br />
* 2005-02-17 [https://github.com/moodle/moodle/commit/06e273a1c3496a67193a16485ff695d273f69523 06e273a1] (A) attempt at adding QTI 2.0 export.<br />
* 2005-03-03 [https://github.com/moodle/moodle/commit/c6bfdec3fc8d2db34be464bc01e573e23e54e748 c6bfdec3] (AT) attempt at adding question versioning, that never really got anywhere.<br />
* 2005-05-06 [https://github.com/moodle/moodle/commit/ee1fb969c8274130c0e7a7317dd69a8d48e0e54f ee1fb969] (P) '''adaptive mode added''' by Gustav Delius et al of the Serving Mathematics project.<br />
* 2005-05-15 [https://github.com/moodle/moodle/commit/0fc5939983046b8c00a49a1ed42381da195619f6 0fc59399] (PA) '''Item analysis report added''' by Enrique Castro<br />
* 2005-05-16 [https://github.com/moodle/moodle/commit/691d06114e40e1889d2dce7012272463dd60cba1 691d0611] (A) Examview import format.<br />
* 2005-06-04 [https://github.com/moodle/moodle/commit/7bbe08a267f262736df50a130066a076a6c6e095 7bbe08a2] (AT) simplest and fullstat reports removed.<br />
== Moodle 1.5 release 5 June 2005 ==<br />
* 2005-06-26 [https://github.com/moodle/moodle/commit/ed460c8e04d08944a778587b16f4bb22aac043ac ed460c8e] (P) Essay question type by Mark Nielsen<br />
* 2005-07-22 [https://github.com/moodle/moodle/commit/80ed3fe6b02b1364bf1c1f0d625e590275caa1f8 80ed3fe6] (PA) Responses report added (temporarily)<br />
* 2006-02-08 [https://github.com/moodle/moodle/commit/401c3496ae9668f1f0e6f33745afa8e73e11f8e2 401c3496] (P) Option for an enforced delay between attempts.<br />
* 2006-02-19 [https://github.com/moodle/moodle/commit/14afbbf0344c275e655b0d51eb01fee7cdb0ce0b 14afbbf0] (A) Tool for re-ordering all the questions in a quiz at once.<br />
* 2006-02-24 [https://github.com/moodle/moodle/commit/516cf3eb59ae523f7997616502603793f38fae9a 516cf3eb] (T) '''Question bank code and question types moved from mod/quiz -> question.'''<br />
* 2006-03-01 [https://github.com/moodle/moodle/commit/03c8c27ee00d4c5d9ab347d4dfdbf5d7a11191fa 03c8c27e] (PA) Option to show students with/without attempts in the quiz reports.<br />
* 2006-03-08 [https://github.com/moodle/moodle/commit/d1c974813032984dd852ea3f4586f04d8eecb817 d1c97481] (A) Blackboard 6 question import format.<br />
* 2006-03-22 [https://github.com/moodle/moodle/commit/ead293420d0baf8af94309fa0e8b0518d8f68711 ead29342] (T) Question types now a proper sort of plugin.<br />
* 2006-03-24 [https://github.com/moodle/moodle/commit/4eda4eecbd1b7fd7dc64a95ed34d6e9ad97a4a48 4eda4eec] (T) 'Missing' qtype added.<br />
* 2006-03-26 [https://github.com/moodle/moodle/commit/5f9ef821df8f4bd984e11cf41931802f72efc885 5f9ef821] (AT) Responses report moved from core to contrib (undoing 80ed3fe6b).<br />
* 2006-03-27 [https://github.com/moodle/moodle/commit/31e95855b85d551f249a2d7bed0d5479e159d3b3 31e95855] (T) Quiz report plugin structure improved.<br />
* 2006-04-07 [https://github.com/moodle/moodle/commit/b6e907a245ddbe17a69125725717625e3ede3b72 b6e907a2] (PA) Manual grading made applicable to all qtypes, not just Essay.<br />
* July 2006 '''Tim Hunt takes over as quiz maintainer'''<br />
== Moodle 1.6 release 20 June 2006 ==<br />
* 2006-07-04 [https://github.com/moodle/moodle/commit/a58ffe3fe2526e04f21c1d95786cd027a82f4371 a58ffe3f] (P) Allow matching questions to have extra distractors.<br />
* 2006-07-12 [https://github.com/moodle/moodle/commit/1fe641f7b43b63cb5289b0ffa8b6c4e1f2ee61ff 1fe641f7] (P) Support for matching common wrong, or partially correct, responses to numeric questions, not just one right answer.<br />
* 2006-08-08 [https://github.com/moodle/moodle/commit/bbbf2d401564ade2548592853586005a7bcde900 bbbf2d40] (AT) Roles and permissions system added to Moodle.<br />
* 2006-08-11 [https://github.com/moodle/moodle/commit/1b8a7434e28f5508a3f7ae116192a3ac7234543d 1b8a7434] (P) '''General feedback added to all types. (It was initially called something else, then renamed in a4514d91d)'''.<br />
* 2006-08-11 [https://github.com/moodle/moodle/commit/613f306d1d68aaf826d8b6ccf26cced0dc2fa928 613f306d] (T) Moodle database code changed to use XMLDB.<br />
* 2006-08-22 [https://github.com/moodle/moodle/commit/212b7b8cd9af682fc32c76d1bfd6172ead62a27c 212b7b8c] (P) Quiz overall feedback added.<br />
* 2006-08-24 [https://github.com/moodle/moodle/commit/307f045f0718da95d00faf38a630d4f3169f12e5 307f045f] (P) '''Overall feedback options added to multiple-choice questions'''.<br />
== Moodle 1.7 release 7 November 2006 ==<br />
* 2006-11-29 [https://github.com/moodle/moodle/commit/ee259d0cd1f05219547de294e60656d303462ac3 ee259d0c] (A) Support for including category information in GIFT and Moodle XML export files.<br />
* 2006-12-19 [https://github.com/moodle/moodle/commit/a23f0aaf9570886bf5803459f0018dd68e835328 a23f0aaf] (T) Moodle converted to use formslib.php, rather than hand-coded forms.<br />
* 2006-12-21 [https://github.com/moodle/moodle/commit/77c7f0f549e24c7a1d180967379c64af77515105 77c7f0f5] (A) Open Office format support added to quiz report downloads.<br />
* 2007-02-20 [https://github.com/moodle/moodle/commit/624cbc9c26a5f4b56083b2c1321891f0af62bc82 624cbc9c] (A) Option to display the question text when browsing the question bank.<br />
== Moodle 1.8 release 30 March 2007 ==<br />
* 2007-04-13 [https://github.com/moodle/moodle/commit/3e0647ffaf2c81224b6f7d2ed24d5188888fcfb5 3e0647ff] (P) Options for how multiple choice choices are numbered.<br />
* 2007-06-15 [https://github.com/moodle/moodle/commit/294e63eadd0c49ed829c055111c15e08ab56d789 294e63ea] (PT) First attempt to allow students to upload files during attempts. (Gets broken in the changes to 2.0, and was never completely working, e.g. backup and restore never worked.)<br />
* 2007-06-19 [https://github.com/moodle/moodle/commit/7a6f4066cee03e8db752a66d667d91b9b28f9ea5 7a6f4066] (A) Course reset implemented for quizzes.<br />
* 2007-06-26 [https://github.com/moodle/moodle/commit/ac48e43a896d1a6315c38e3aac5a3c5f0d327cb8 ac48e43a] (A) Email notification/confirmation of submitted quiz attempts.<br />
* 2007-07-21 [https://github.com/moodle/moodle/commit/e8825e724bf6f916752a067c9be983295729ed4f e8825e72] (A) Support for essay and description qtypes added to GIFT.<br />
* 2007-07-22 [https://github.com/moodle/moodle/commit/42ff9ce68b932f844a326c4b8197cdcbd74ea002 42ff9ce6] (A) '''Support for the new gradebook added to the quiz.'''<br />
* 2007-07-30 [https://github.com/moodle/moodle/commit/00719c02d66fca180334d22b4e0cf781a8ef4c27 00719c02] (PA) Separate review option for quiz overall feedback.<br />
* 2007-08-08 [https://github.com/moodle/moodle/commit/a41e328736f4cdd95c62277346832c19da93115a a41e3287] (T) Allow third-party qtype plugins to participate in GIFT and Moodle XML import export.<br />
* 2007-08-09 [https://github.com/moodle/moodle/commit/271e6decdac9d9445c047a7d90cc98b7912cf1b6 271e6dec] (AT) '''New question bank''' by Jamie Pratt. Cleaner code. Many problems with sharing questions between courses fixed. Finer-grained capabilities.<br />
* 2007-08-27 [https://github.com/moodle/moodle/commit/5ada3c8e3aa858d7e11ccf5e92cbad78f813d691 5ada3c8e] (A) Support for Groupings added to the quiz.<br />
* 2007-10-11 [https://github.com/moodle/moodle/commit/14e66f3bebac8c587d08e14f92d6f8332c26161d 14e66f3b] (A) Overridden grades from the gradebook shown in the quiz UI.<br />
== Moodle 1.9 release 3 March 2008 ==<br />
* 2008-03-06 [https://github.com/moodle/moodle/commit/05866d85d4155a632bb988b8c5a16252df69b7a3 05866d85] (T) Code for all the different different rules about whether a student can attempt the quiz now moved into separate classes. Not yet a proper plugin type.<br />
* 2008-05-07 [https://github.com/moodle/moodle/commit/8b87ab000003e7cc830fb959b72d80de79b84cd2 8b87ab00] (PA) Summary graph added to the quiz overview report. (This is the start of a set of '''major improvements to the quiz reports for Moodle 2.0''', done by Jamie Pratt for the OU.)<br />
* 2008-05-15 [https://github.com/moodle/moodle/commit/aad5b0fca94bbc278f754634134a3839267ceb36 aad5b0fc] (PA) Group and course averages added to the overview report.<br />
* 2008-05-15 [https://github.com/moodle/moodle/commit/f33e1ed4ae4948e337e5fee61adc3580f81dfa80 f33e1ed4] (T) Moodle database connection changed to use the new global $DB.<br />
* 2008-05-23 [https://github.com/moodle/moodle/commit/a59eb2b6a8e569ea5777f6cfa1d9aab9669bb79f a59eb2b6] (A) Groups support added to the Manual grading report.<br />
* 2008-06-10 [https://github.com/moodle/moodle/commit/0c1c764e8257d6db589ed0d89371d4b49b8972d7 0c1c764e] (PA) '''Quiz statistics report added.'''<br />
* 2008-06-27 [https://github.com/moodle/moodle/commit/36e413e38c5d04c923f62e2525b2d59767babfc8 36e413e3] (P) '''Quiz attempt UI greatly improved, with new navigation panel and summary page.'''<br />
* 2008-07-11 [https://github.com/moodle/moodle/commit/98f38217bb6de4ffa78f79e7371b5d8f53aaf98a 98f38217] (T) Regrading UI merged into overview report. Dry run of regrades made possible, before doing it for real.<br />
* 2008-07-20 [https://github.com/moodle/moodle/commit/7f29a7dbe40d21dcbc5f0d21a399c2e6f7b3c98b 7f29a7db] (PA) '''Responses report moved back out of contrib, and in to standard Moodle.'''<br />
* 2008-07-24 [https://github.com/moodle/moodle/commit/17f1782c1217ab5b83de6bd55a4e7a7adb0abe5a 17f1782c] (T) cron support added to quiz reports.<br />
* 2008-08-15 [https://github.com/moodle/moodle/commit/f88fb62c40249c74475de64eedeae2c3a549441c f88fb62c] (AT) rounding of quiz and question grades before they are displayed is made consistent everywhere.<br />
* 2008-08-15 [https://github.com/moodle/moodle/commit/f9a2cf86a9c7a77bd0be1c17eca9260f0833f45e f9a2cf86] (T) Quiz grades are now consistently stored in the database as NUMEBER(10,5), and question grades as NUMBER(12,7).<br />
* 2008-08-29 [https://github.com/moodle/moodle/commit/62e76c6766368de71e6a7f7cd9a7fc17be942265 62e76c67] (P) Let students flag questions during quiz attempts.<br />
* 2008-09-09 [https://github.com/moodle/moodle/commit/8df9635465bd09d9624407289f11680bbf2c5f0e 8df96354] (AT) Admin page for managing the installed question types.<br />
* 2008-09-11 [https://github.com/moodle/moodle/commit/c308138f8994c55f17858f852be40c8d69ae9733 c308138f] (AT) Item analysis report removed.<br />
* 2008-11-20 [https://github.com/moodle/moodle/commit/fa583f5f6eb3b4c9f624e77df0cfb9f9e705e6c3 fa583f5f] (T) '''New editing UI for quizzes'''. Finnish Summer of Code project by Olli Savolainen.<br />
* 2008-11-28 [https://github.com/moodle/moodle/commit/f24493ec9b0e46c30c5343283dd10179a0fd892e f24493ec] (P) Allow essay questions to be selected by random questions.<br />
* 2009-01-07 [https://github.com/moodle/moodle/commit/a733c4b98b527ef66ea48eb4f0d11bc59ae89a56 a733c4b9] (A) Add an option to display the user's photo and name on the quiz attempt page.<br />
* 2009-01-14 [https://github.com/moodle/moodle/commit/96c7d771df88fd0aa2514ba898c89f81053c6e93 96c7d771] (AT) mod/quiz:reviewmyattempts capability separated from mod/quiz:attempt.<br />
* 2009-01-20 [https://github.com/moodle/moodle/commit/46795afcbdd7fe43de03afb6b2b87eb5c21ea691 46795afc] (T) refactoring of the code that displays the question bank, to eliminate duplication between the quiz editing and question bank display code.<br />
* 2009-02-25 [https://github.com/moodle/moodle/commit/cd120b2344d0c9d8f8bfa20466e3abb9fe0e4c8a cd120b23] (AT) New YUI pop-up for selecting the question type when adding a new question, replacing the old select menu.<br />
* 2009-05-06 [https://github.com/moodle/moodle/commit/6bf44482c651faa946fb2cf5a34475456258c708 6bf44482] (T) Moodle 2.0 $PAGE and $OUTPUT changes applied to the quiz.<br />
* 2009-05-29 [https://github.com/moodle/moodle/commit/83a15d025cb163509dcff124ed914058c826966f 83a15d02] (P) '''New question type 'Simple calculated' by Pierre Pichet.'''<br />
* 2009-06-05 [https://github.com/moodle/moodle/commit/aa9c6ecf02b25e967766ad09a23b668ebff83a7e aa9c6ecf] (A) Highlight the last question you edited in the question bank like. A small, but very useful change.<br />
* 2009-06-12 [https://github.com/moodle/moodle/commit/cf6155226cba2e4e62e9e1cb44dad88afacc39b4 cf615522] (T) require_js replaced by $PAGE->requires everywhere.<br />
* 2009-06-19 [https://github.com/moodle/moodle/commit/17da2e6f28d3477eb4ccfe5ac94c9cebb8456c8e 17da2e6f] (T) The concept of 'subplugins' is born. Quiz report, within the quiz, are one of the early examples. (Regrettably, the prefix quiz_, not quizreport_ is chosen.)<br />
* 2009-09-30 [https://github.com/moodle/moodle/commit/7d4dfc481e65a2548d32723a4726ddc833cdd1f5 7d4dfc48] (A) Integration with 'Safe Exam Browser' added.<br />
* 2010-02-07 [https://github.com/moodle/moodle/commit/2d279432b0c64c8dda20758641f529f87f14ea1f 2d279432] (P) '''New question type 'Calculated multiple choice' by Pierre Pichet.'''<br />
* 2010-03-08 [https://github.com/moodle/moodle/commit/990650f94cbe46344ced45c5fe69ebc273da1d00 990650f9] (A) Different open and close dates, etc., for different groups or individuals. Implemented by Matt Petro of the University of Wisconsin - Madison Engineering School.<br />
* 2010-05-20 [https://github.com/moodle/moodle/commit/9df209c1226b1859a0c3d534f026306d2dfc13f9 9df209c1] (T) Moodle events now triggered for starting and finishing quiz attempts.<br />
* 2010-05-21 [https://github.com/moodle/moodle/commit/56ed242b51909666b9e757f1a94fb2c105928b5e 56ed242b] (PA) New quiz option 'Show blocks during quiz attempts' by Sam Hemelryk.<br />
* 2010-08-06 [https://github.com/moodle/moodle/commit/d39ba35c34d4272d5092b5f80bacd2be6e7fc50f d39ba35c] (A) Make it clearer in the quiz grades report when essay questions need to be graded.<br />
* 2010-08-10 [https://github.com/moodle/moodle/commit/fe6ce2348945f267b3d90ed74442a221c0a9808d fe6ce234] (T) Quiz and question bank converted to the Moodle 2.0 Files API.<br />
* 2010-10-24 [https://github.com/moodle/moodle/commit/41941110fdecb6313637a6ad77c6e6e26aa79833 41941110] (T) Quiz and question bank converted to the Moodle 2.0 Backup and restore system.<br />
* 2010-10-30 [https://github.com/moodle/moodle/commit/92b360057504ecfb2b3f8174d06a32d7564314bf 92b36005] (P) Grading of units in numerical and calculated questions changed to work the way people would expect.<br />
== Moodle 2.0 release 24 November 2010 ==<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (PT) '''New moodle question engine, a major development by Tim Hunt, introduces the concept of Question behaviour, to handle the difference between adaptive, deferred feedback, and manually graded questions'''.<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (P) '''This also allows new behaviours like Certainty based marking, Immediate feedback, and Interactive with multiple tries.'''<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (T) Also in this change, many more unit tests for questions, and all questions now use renderers for output.<br />
* End Dec 2010 Moodle development moves from CVS to git.<br />
* 2011-02-11 [https://github.com/moodle/moodle/commit/fd214b596d63d2f7f8aff0e1d6550978f8ba60c7 fd214b59] (PT) Code to preserve the scroll position when submitting a question in the quiz, or editing the quiz.<br />
* 2011-03-10 [https://github.com/moodle/moodle/commit/894e8b4e93d8f3b4036ab738e2396a5eb0707c0a 894e8b4e] (P) New essay features: Use the HTML editor or not; control the size of the response area; allow attachments; and information to be shown to the person grading.<br />
* 2011-03-16 [https://github.com/moodle/moodle/commit/217f9a618ccc554a3650c2f9fbb9595215fd82fb 217f9a61] (T) As part of this, handling files are part of question responses now works properly, finally doing what 294e63ead tried.<br />
* 2011-04-26 [https://github.com/moodle/moodle/commit/606e07d574c649cedea92ff5bf3946f19a93e747 606e07d5] (T) Student-visible parts of the quiz converted to use a renderer, mostly thanks to Dean Lennard.<br />
* 2011-05-25 [https://github.com/moodle/moodle/commit/1da821bbde1348a67326ff7f676dff49182d4247 1da821bb] (PT) Introduce the concept of 'question variants' as a first-class concept in the question engine.<br />
* 2011-06-01 [https://github.com/moodle/moodle/commit/4b2da7cee08bea3c00338c5807f874a370c1c065 4b2da7ce] (A) Ability to restore 1.9 backups added to the quiz and question bank.<br />
* 2011-06-15 [https://github.com/moodle/moodle/commit/fde4560daeb9597142d9788f4e9051d36a9f67c2 fde4560d] (A) Admin page for managing the installed question behaviours.<br />
* 2011-06-16 [https://github.com/moodle/moodle/commit/2a6c5c52ee258b0097895c889cef949d8ab5ce72 2a6c5c52] (PT) Ability to have images in multiple choice answers restored. (It was broken since 2.0.)<br />
== Moodle 2.1 release 1 July 2011 ==<br />
* 2011-10-03 [https://github.com/moodle/moodle/commit/a28a5d74af1db4eeb12e194c0c9db111522458d2 a28a5d74] (T) Make the '''Quiz access rules''' (from 05866d85d) become proper sub-plugings of the quiz.<br />
* 2011-10-28 [https://github.com/moodle/moodle/commit/2dc54611f2c23e7b1686b26abc8f4fbda9c6531b 2dc54611] (AT) Unmaintained qti_two export format removed.<br />
* 2011-11-02 [https://github.com/moodle/moodle/commit/75a31c9039b1f06f6d1dca7b07282117de83aa41 75a31c90] (T) Plugin API made more standard in areas like cron, languages strings, for the question-related plugins.<br />
== Moodle 2.2 release 5 December 2011 ==<br />
* 2011-12-07 [https://github.com/moodle/moodle/commit/c2f5e2ab816e4bc067085b0f9c59b01739d945a9 c2f5e2ab] (T) Plugin API made more standard in areas like cron, languages strings, for the quiz-related plugins.<br />
* 2012-01-08 [https://github.com/moodle/moodle/commit/5db829494030a73d15dabdc8be8685497888b138 5db82949] (P) Quiz attempt tracks the page the student is currently on, and takes them back there if they leave the attempt and come back later. (By Charles Fulton)<br />
* 2012-03-07 [https://github.com/moodle/moodle/commit/88eca3cd2666a7ea451ecc8862867e68563d8bb7 88eca3cd] (A) New mod:quiz/addinstance lets you control which teachers can add a quiz to a course. (The same sort of capability is added to each activity.)<br />
* 2012-01-20 [https://github.com/moodle/moodle/commit/33c8d37b6f2fa380a50ef97d60103ed9a1f9c376 33c8d37b] (P) An option to force students to answer questions strictly in order, rather than letting them navigate around the quiz as they please. (By Charles Fulton)<br />
* ... hopefully much more yet to come.<br />
''Last updated 11th April 2012. This summary currently contains 148 items, whereas the full git log command at the top of this page lists 4777 commits.''<br />
== See also ==<br />
* [[Question API]]<br />
[[Category:Questions]]<br />
[[Category:Quiz]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=History_of_the_Moodle_quiz_and_question_bank&diff=61733History of the Moodle quiz and question bank2022-02-15T14:52:04Z<p>Tim+Hunt: </p>
<hr />
<div>This is edited highlights from<br />
git log --no-merges mod/quiz question lib/questionlib.php admin/qtypes.php admin/qbehaviours.php<br />
(If you prefer, substitute <tt>gitk</tt> for <tt>git log</tt> in that.) Particularly significant changes have be put in bold, but this is somewhat arbitrary.<br />
<br />
In several cases, the first commit purporting to add a feature was pretty broken, or minimal, and then more work was done to fix it up and make it actually work. In these cases, generally I have just picked out the first commit mentioning a particular feature.<br />
<br />
The headings mark points in time, so the things between the Moodle 1.0 and Moodle 1.1 headings are features that are new in Moodle 1.1. The funny numbers after the date are the commit hashes. They are a link to that change on github.<br />
<br />
The changes have been classified according to whether they are primarily P - pedagogic, A - administrative or T - technical.<br />
<br />
At the moment, I was inconsistent with attributing credit for features. That is just sloppiness on my part, and hopefully I will fix it some day.--[[User:Tim Hunt|Tim Hunt]] 04:33, 12 April 2012 (WST)<br />
<br />
''Does anyone know when Gustav Delius started being quiz maintainer?''<br />
== Moodle 1.0 release 20 August 2002 ==<br />
* 2002-10-04 [https://github.com/moodle/moodle/commit/730fd187c825ca8e71bf78a130a4d7ca4e1785bb 730fd187] (PAT) '''First version of quiz module added''' by Martin Dougiamas. The first feature that anyone was paid to write for Moodle!<br />
* 2002-10-06 [https://github.com/moodle/moodle/commit/14d8c0b4099b0d331bf6e766eac046e2259e173a 14d8c0b4] (P) '''First three question types created, Multiple-Choice, Short answer and True/false.'''<br />
* 2002-10-13 [https://github.com/moodle/moodle/commit/579ddad5ef181299080f8d75641f392300649441 579ddad5] (PA) '''first, very basic, grades report added.'''<br />
* 2002-10-14 [https://github.com/moodle/moodle/commit/7bd1aa1d648e801bd21fb5fa3030ef9c902f33dd 7bd1aa1d] (A) first quiz editing UI<br />
* 2002-10-15 [https://github.com/moodle/moodle/commit/2a2c9725bbadd1e4391e03b54eafdab23ad18ae8 2a2c9725] (A) editing UI for the first three types.<br />
* 2002-10-18 [https://github.com/moodle/moodle/commit/958aafe2b419978eb03d4ea622c93224d28602c7 958aafe2] (A) tracking start and end time of attempts.<br />
* 2002-10-20 [https://github.com/moodle/moodle/commit/c74a0ca5c24473ccf5dc1ba9b8a5b44dcecb2fb9 c74a0ca5] (A) question category editing UI. (Note, categories cannot be nested, but note the the ides of published categories to allow sharing between courses already exists.)<br />
* 2002-10-21 [https://github.com/moodle/moodle/commit/e1c91df09b9dc71758fec06de2c4809faa9700ae e1c91df0] (A) allow questions to be deleted.<br />
* 2002-10-22 [https://github.com/moodle/moodle/commit/e331eb06fdbb4adc5ebce3cbf4aacda7ce7a5ed5 e331eb06] (A) regrading implemented<br />
* 2002-12-09 [https://github.com/moodle/moodle/commit/9307692fdfd9c41d8ff1799df7c87e2d8c1c8475 9307692f] (PA) JavaScript confirmation before submitting an attempt.<br />
* 2003-01-01 [https://github.com/moodle/moodle/commit/8e6c87ccf3c11b9e2ca7cfd222b6e2a0c67a93db 8e6c87cc] (PA) Teachers can enable students to review, but only after the quiz close date.<br />
* 2003-02-16 [https://github.com/moodle/moodle/commit/49220fa70cc90013773771727f0f36103a19f88b 49220fa7] (A) Framework for quiz import/export formats. Only one real format for now, missingword.<br />
* 2003-02-24 [https://github.com/moodle/moodle/commit/95dbc030a88308873fe0f97261bb0c847c364ad7 95dbc030] (P) '''Random short-answer match qtype added.'''<br />
* 2003-03-30 [https://github.com/moodle/moodle/commit/54a67a59218c7c5242a1398e5f3d08f23c9974d2 54a67a59] (P) '''Matching question type added.'''<br />
* 2003-04-09 [https://github.com/moodle/moodle/commit/34d52ad7d29675bc1f1c6275bddf896e262145be 34d52ad7] (P) '''Random questions added.'''<br />
* 2003-04-09 [https://github.com/moodle/moodle/commit/4b85b717128765ec207048e0006cdc25c10d7ac8 4b85b717] (P) Shuffle questions and shuffle answers features added.<br />
* 2003-05-02 [https://github.com/moodle/moodle/commit/c6bcd06abac61a6d15a8f9b4d4bb12090eb93bbb c6bcd06a] (A) AON and Blackboard import formats added.<br />
* 2003-07-06 [https://github.com/moodle/moodle/commit/401c8de6c55a348b3de7d2e8d785d59e1d5f6712 401c8de6] (P) '''Description question type added.'''<br />
* 2003-07-09 [https://github.com/moodle/moodle/commit/d7c93ec8fa8d11f63998ab9fd78c2c2f41045568 d7c93ec8] (A) Backup and restore added to the quiz.<br />
* 2003-07-10 [https://github.com/moodle/moodle/commit/361f649d7ad7ddf2d0af1932505a6dd316559fb6 361f649d] (P) '''Numerical qtype added.'''<br />
* 2003-07-24 [https://github.com/moodle/moodle/commit/29d5d0b40c31f1b589af9c91598676dae9b6444e 29d5d0b4] (T) Quiz reports made into a sort-of plugin.<br />
* 2003-07-24 [https://github.com/moodle/moodle/commit/c90f563e398f20b0cf473efb55bbf9b8ffb35420 c90f563e] (PA) simplestat report added.<br />
* 2003-07-28 [https://github.com/moodle/moodle/commit/250e71d96747693f40eb7db6eb40ba166b897a96 250e71d9] (A) countdown time when less than 24 hours from the close date.<br />
* 2003-08-01 [https://github.com/moodle/moodle/commit/8b439f8c164c15d39c3fa1bec029b616df5281dc 8b439f8c] (P) '''Multi-answer question type.'''<br />
* 2003-08-03 [https://github.com/moodle/moodle/commit/0f36ecb9ea9634c6b0732ebf06bc36707d3ecba6 0f36ecb9] (P) Each attempt builds on the last added<br />
== Moodle 1.1 release 29 August 2003 ==<br />
* 2003-09-10 [https://github.com/moodle/moodle/commit/ed1daaa9d7b5d7e1e8885854d7f2add117c4f24c ed1daaa9] (P) First support for ungraded quizzes.<br />
* 2003-10-15 [https://github.com/moodle/moodle/commit/857e0dfdd5ee3501eea54178829c094784bbd1f2 857e0dfd] (A) Course test manager import format.<br />
* 2003-11-20 [https://github.com/moodle/moodle/commit/565e970ee212aa5a355890ff85a14828b4bf735a 565e970e] (PA) fullstat report by Thomas Robb<br />
* 2003-11-20 [https://github.com/moodle/moodle/commit/7c9c2a8da68f420a8fa04ae1a90493a1dbe4f633 7c9c2a8d] (P) allow negative grades for multiple-choice.<br />
* 2003-12-01 [https://github.com/moodle/moodle/commit/0315927955b0877d957453ae617b527d3a70d453 03159279] (A) Aiken import format.<br />
* 2003-12-12 [https://github.com/moodle/moodle/commit/43bf9fc2d71450ec1fb91cd739814a5b20dad12a 43bf9fc2] (T) Improved plug-in formation for import/export formats.<br />
* 2003-12-12 [https://github.com/moodle/moodle/commit/43bf9fc2d71450ec1fb91cd739814a5b20dad12a 43bf9fc2] (A) '''GIFT format added.'''<br />
* 2003-12-29 [https://github.com/moodle/moodle/commit/0ce4aa1a8a381f2014d46e6ee5b04db1bdef8e23 0ce4aa1a] (P) Short-answer qtype enhanced to allow wild-cards.<br />
* 2004-01-11 [https://github.com/moodle/moodle/commit/998ebd420ab6c71aa1ac555287ce7ffcd4db8672 998ebd42] (A) WebCT import format added.<br />
* 2004-01-13 [https://github.com/moodle/moodle/commit/a9981ba6194c438aace048e9fc3f8130a3155542 a9981ba6] (A) Matching questions added to GIFT format<br />
* 2004-02-14 [https://github.com/moodle/moodle/commit/831b236f2c68b252203dcf4a9ad68a7191fbfc16 831b236f] (A) Groups support added to the quiz reports.<br />
* 2004-02-16 [https://github.com/moodle/moodle/commit/bbcbc0fecc7f8c7f5b71424864bdef4f1b540c17 bbcbc0fe] (P) '''First version of lesson module added.'''<br />
== Moodle 1.2 release 20 March 2004 ==<br />
* 2004-05-19 [https://github.com/moodle/moodle/commit/56215ed40f5f46aa0d1943585784e7327ea724e7 56215ed4] (A) Warn teachers if they are editing a quiz with attempts.<br />
== Moodle 1.3 release 25 May 2004 ==<br />
* 2004-06-02 [https://github.com/moodle/moodle/commit/f41e824f33414e6184611a6d1708cd3a58ec9058 f41e824f] (PA) Time limit feature added.<br />
* 2004-07-07 [https://github.com/moodle/moodle/commit/88c898f590b12bbb6bcff1c7e482669e17ab5115 88c898f5] (A) Password and subnet restrictions added.<br />
* 2004-07-21 [https://github.com/moodle/moodle/commit/8966a111310d0cc1c7012d68bcd137a5bafdf11f 8966a111] (T) '''Question types made plug-ins''', although still within mod/quiz.<br />
* 2004-07-30 [https://github.com/moodle/moodle/commit/8c5a95facbeff21a356396a588446ed77713cb9e 8c5a95fa] (P) '''Calculated question type added.'''<br />
* 2004-07-30 [https://github.com/moodle/moodle/commit/7a82d193240ab6a3df435ac2c89821864d5d2ee4 7a82d193] (P) '''Units added to numerical (and calculate) question types.'''<br />
* 2004-08-06 [https://github.com/moodle/moodle/commit/bbb4e32d3c07fa2192f54cebddf677d9938bf8b1 bbb4e32d] (A) '''Moodle XML export format added.'''<br />
* 2004-08-16 [https://github.com/moodle/moodle/commit/9c8047cfd07c5da2393720063949f448cd185c07 9c8047cf] (PA) '''Question preview feature added.'''<br />
== Moodle 1.4 release 31 August 2004 ==<br />
* 2004-12-16 [https://github.com/moodle/moodle/commit/6c83959e33ddd8978aa2a88af4f47bfeb97af5d4 6c83959e] (A) 'Secure pop-up' mode added.<br />
* 2004-12-16 [https://github.com/moodle/moodle/commit/d6b3c7b82e9f385daf6f9d642e8112a6bc7298ce d6b3c7b8] (A) Moodle XML export added.<br />
* 2004-12-23 [https://github.com/moodle/moodle/commit/a5c0990e5d5477f743dddd234312e0cf5223e22e a5c0990e] (A) Config page to allow admins to set default quiz options.<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/34283aa87d2a37fd237723c24c8da2b93a5bbec2 34283aa8] (A) 'Show advanced' button added to the quiz settings form. (Copying what is already done in the Resource module.)<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/34283aa87d2a37fd237723c24c8da2b93a5bbec2 34283aa8] (PA) Start of more sophisticated review options.<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/ac27e47dc48dbe82b19e24ae59e281b74e758213 ac27e47d] (A) Hierarchical question categories.<br />
* 2005-01-03 [https://github.com/moodle/moodle/commit/d70ccc495ca904789940f281655b94d9a8e8637b d70ccc49] (P) Multi-page quizzes allowed<br />
* 2005-01-25 [https://github.com/moodle/moodle/commit/1680925333d35cb0ed0209f3b5c27fc681c9d278 16809253] (A) Learnwise question import format<br />
* 2005-02-01 [https://github.com/moodle/moodle/commit/bdfa14dd7f34ada369dc430dc1f9f82dcc93b7dc bdfa14dd] (PA) Allow blocks on the quiz view page<br />
* 2005-02-14 [https://github.com/moodle/moodle/commit/72036f9305517224f9bdc67771f2bfde93c143a2 72036f93] (A) Now a teacher option for number of decimal points to show for grades.<br />
* 2005-02-17 [https://github.com/moodle/moodle/commit/06e273a1c3496a67193a16485ff695d273f69523 06e273a1] (A) attempt at adding QTI 2.0 export.<br />
* 2005-03-03 [https://github.com/moodle/moodle/commit/c6bfdec3fc8d2db34be464bc01e573e23e54e748 c6bfdec3] (AT) attempt at adding question versioning, that never really got anywhere.<br />
* 2005-05-06 [https://github.com/moodle/moodle/commit/ee1fb969c8274130c0e7a7317dd69a8d48e0e54f ee1fb969] (P) '''adaptive mode added''' by Gustav Delius et al of the Serving Mathematics project.<br />
* 2005-05-15 [https://github.com/moodle/moodle/commit/0fc5939983046b8c00a49a1ed42381da195619f6 0fc59399] (PA) '''Item analysis report added''' by Enrique Castro<br />
* 2005-05-16 [https://github.com/moodle/moodle/commit/691d06114e40e1889d2dce7012272463dd60cba1 691d0611] (A) Examview import format.<br />
* 2005-06-04 [https://github.com/moodle/moodle/commit/7bbe08a267f262736df50a130066a076a6c6e095 7bbe08a2] (AT) simplest and fullstat reports removed.<br />
== Moodle 1.5 release 5 June 2005 ==<br />
* 2005-06-26 [https://github.com/moodle/moodle/commit/ed460c8e04d08944a778587b16f4bb22aac043ac ed460c8e] (P) Essay question type by Mark Nielsen<br />
* 2005-07-22 [https://github.com/moodle/moodle/commit/80ed3fe6b02b1364bf1c1f0d625e590275caa1f8 80ed3fe6] (PA) Responses report added (temporarily)<br />
* 2006-02-08 [https://github.com/moodle/moodle/commit/401c3496ae9668f1f0e6f33745afa8e73e11f8e2 401c3496] (P) Option for an enforced delay between attempts.<br />
* 2006-02-19 [https://github.com/moodle/moodle/commit/14afbbf0344c275e655b0d51eb01fee7cdb0ce0b 14afbbf0] (A) Tool for re-ordering all the questions in a quiz at once.<br />
* 2006-02-24 [https://github.com/moodle/moodle/commit/516cf3eb59ae523f7997616502603793f38fae9a 516cf3eb] (T) '''Question bank code and question types moved from mod/quiz -> question.'''<br />
* 2006-03-01 [https://github.com/moodle/moodle/commit/03c8c27ee00d4c5d9ab347d4dfdbf5d7a11191fa 03c8c27e] (PA) Option to show students with/without attempts in the quiz reports.<br />
* 2006-03-08 [https://github.com/moodle/moodle/commit/d1c974813032984dd852ea3f4586f04d8eecb817 d1c97481] (A) Blackboard 6 question import format.<br />
* 2006-03-22 [https://github.com/moodle/moodle/commit/ead293420d0baf8af94309fa0e8b0518d8f68711 ead29342] (T) Question types now a proper sort of plugin.<br />
* 2006-03-24 [https://github.com/moodle/moodle/commit/4eda4eecbd1b7fd7dc64a95ed34d6e9ad97a4a48 4eda4eec] (T) 'Missing' qtype added.<br />
* 2006-03-26 [https://github.com/moodle/moodle/commit/5f9ef821df8f4bd984e11cf41931802f72efc885 5f9ef821] (AT) Responses report moved from core to contrib (undoing 80ed3fe6b).<br />
* 2006-03-27 [https://github.com/moodle/moodle/commit/31e95855b85d551f249a2d7bed0d5479e159d3b3 31e95855] (T) Quiz report plugin structure improved.<br />
* 2006-04-07 [https://github.com/moodle/moodle/commit/b6e907a245ddbe17a69125725717625e3ede3b72 b6e907a2] (PA) Manual grading made applicable to all qtypes, not just Essay.<br />
* July 2006 '''Tim Hunt takes over as quiz maintainer'''<br />
== Moodle 1.6 release 20 June 2006 ==<br />
* 2006-07-04 [https://github.com/moodle/moodle/commit/a58ffe3fe2526e04f21c1d95786cd027a82f4371 a58ffe3f] (P) Allow matching questions to have extra distractors.<br />
* 2006-07-12 [https://github.com/moodle/moodle/commit/1fe641f7b43b63cb5289b0ffa8b6c4e1f2ee61ff 1fe641f7] (P) Support for matching common wrong, or partially correct, responses to numeric questions, not just one right answer.<br />
* 2006-08-08 [https://github.com/moodle/moodle/commit/bbbf2d401564ade2548592853586005a7bcde900 bbbf2d40] (AT) Roles and permissions system added to Moodle.<br />
* 2006-08-11 [https://github.com/moodle/moodle/commit/1b8a7434e28f5508a3f7ae116192a3ac7234543d 1b8a7434] (P) '''General feedback added to all types. (It was initially called something else, then renamed in a4514d91d)'''.<br />
* 2006-08-11 [https://github.com/moodle/moodle/commit/613f306d1d68aaf826d8b6ccf26cced0dc2fa928 613f306d] (T) Moodle database code changed to use XMLDB.<br />
* 2006-08-22 [https://github.com/moodle/moodle/commit/212b7b8cd9af682fc32c76d1bfd6172ead62a27c 212b7b8c] (P) Quiz overall feedback added.<br />
* 2006-08-24 [https://github.com/moodle/moodle/commit/307f045f0718da95d00faf38a630d4f3169f12e5 307f045f] (P) '''Overall feedback options added to multiple-choice questions'''.<br />
== Moodle 1.7 release 7 November 2006 ==<br />
* 2006-11-29 [https://github.com/moodle/moodle/commit/ee259d0cd1f05219547de294e60656d303462ac3 ee259d0c] (A) Support for including category information in GIFT and Moodle XML export files.<br />
* 2006-12-19 [https://github.com/moodle/moodle/commit/a23f0aaf9570886bf5803459f0018dd68e835328 a23f0aaf] (T) Moodle converted to use formslib.php, rather than hand-coded forms.<br />
* 2006-12-21 [https://github.com/moodle/moodle/commit/77c7f0f549e24c7a1d180967379c64af77515105 77c7f0f5] (A) Open Office format support added to quiz report downloads.<br />
* 2007-02-20 [https://github.com/moodle/moodle/commit/624cbc9c26a5f4b56083b2c1321891f0af62bc82 624cbc9c] (A) Option to display the question text when browsing the question bank.<br />
== Moodle 1.8 release 30 March 2007 ==<br />
* 2007-04-13 [https://github.com/moodle/moodle/commit/3e0647ffaf2c81224b6f7d2ed24d5188888fcfb5 3e0647ff] (P) Options for how multiple choice choices are numbered.<br />
* 2007-06-15 [https://github.com/moodle/moodle/commit/294e63eadd0c49ed829c055111c15e08ab56d789 294e63ea] (PT) First attempt to allow students to upload files during attempts. (Gets broken in the changes to 2.0, and was never completely working, e.g. backup and restore never worked.)<br />
* 2007-06-19 [https://github.com/moodle/moodle/commit/7a6f4066cee03e8db752a66d667d91b9b28f9ea5 7a6f4066] (A) Course reset implemented for quizzes.<br />
* 2007-06-26 [https://github.com/moodle/moodle/commit/ac48e43a896d1a6315c38e3aac5a3c5f0d327cb8 ac48e43a] (A) Email notification/confirmation of submitted quiz attempts.<br />
* 2007-07-21 [https://github.com/moodle/moodle/commit/e8825e724bf6f916752a067c9be983295729ed4f e8825e72] (A) Support for essay and description qtypes added to GIFT.<br />
* 2007-07-22 [https://github.com/moodle/moodle/commit/42ff9ce68b932f844a326c4b8197cdcbd74ea002 42ff9ce6] (A) '''Support for the new gradebook added to the quiz.'''<br />
* 2007-07-30 [https://github.com/moodle/moodle/commit/00719c02d66fca180334d22b4e0cf781a8ef4c27 00719c02] (PA) Separate review option for quiz overall feedback.<br />
* 2007-08-08 [https://github.com/moodle/moodle/commit/a41e328736f4cdd95c62277346832c19da93115a a41e3287] (T) Allow third-party qtype plugins to participate in GIFT and Moodle XML import export.<br />
* 2007-08-09 [https://github.com/moodle/moodle/commit/271e6decdac9d9445c047a7d90cc98b7912cf1b6 271e6dec] (AT) '''New question bank''' by Jamie Pratt. Cleaner code. Many problems with sharing questions between courses fixed. Finer-grained capabilities.<br />
* 2007-08-27 [https://github.com/moodle/moodle/commit/5ada3c8e3aa858d7e11ccf5e92cbad78f813d691 5ada3c8e] (A) Support for Groupings added to the quiz.<br />
* 2007-10-11 [https://github.com/moodle/moodle/commit/14e66f3bebac8c587d08e14f92d6f8332c26161d 14e66f3b] (A) Overridden grades from the gradebook shown in the quiz UI.<br />
== Moodle 1.9 release 3 March 2008 ==<br />
* 2008-03-06 [https://github.com/moodle/moodle/commit/05866d85d4155a632bb988b8c5a16252df69b7a3 05866d85] (T) Code for all the different different rules about whether a student can attempt the quiz now moved into separate classes. Not yet a proper plugin type.<br />
* 2008-05-07 [https://github.com/moodle/moodle/commit/8b87ab000003e7cc830fb959b72d80de79b84cd2 8b87ab00] (PA) Summary graph added to the quiz overview report. (This is the start of a set of '''major improvements to the quiz reports for Moodle 2.0''', done by Jamie Pratt for the OU.)<br />
* 2008-05-15 [https://github.com/moodle/moodle/commit/aad5b0fca94bbc278f754634134a3839267ceb36 aad5b0fc] (PA) Group and course averages added to the overview report.<br />
* 2008-05-15 [https://github.com/moodle/moodle/commit/f33e1ed4ae4948e337e5fee61adc3580f81dfa80 f33e1ed4] (T) Moodle database connection changed to use the new global $DB.<br />
* 2008-05-23 [https://github.com/moodle/moodle/commit/a59eb2b6a8e569ea5777f6cfa1d9aab9669bb79f a59eb2b6] (A) Groups support added to the Manual grading report.<br />
* 2008-06-10 [https://github.com/moodle/moodle/commit/0c1c764e8257d6db589ed0d89371d4b49b8972d7 0c1c764e] (PA) '''Quiz statistics report added.'''<br />
* 2008-06-27 [https://github.com/moodle/moodle/commit/36e413e38c5d04c923f62e2525b2d59767babfc8 36e413e3] (P) '''Quiz attempt UI greatly improved, with new navigation panel and summary page.'''<br />
* 2008-07-11 [https://github.com/moodle/moodle/commit/98f38217bb6de4ffa78f79e7371b5d8f53aaf98a 98f38217] (T) Regrading UI merged into overview report. Dry run of regrades made possible, before doing it for real.<br />
* 2008-07-20 [https://github.com/moodle/moodle/commit/7f29a7dbe40d21dcbc5f0d21a399c2e6f7b3c98b 7f29a7db] (PA) '''Responses report moved back out of contrib, and in to standard Moodle.'''<br />
* 2008-07-24 [https://github.com/moodle/moodle/commit/17f1782c1217ab5b83de6bd55a4e7a7adb0abe5a 17f1782c] (T) cron support added to quiz reports.<br />
* 2008-08-15 [https://github.com/moodle/moodle/commit/f88fb62c40249c74475de64eedeae2c3a549441c f88fb62c] (AT) rounding of quiz and question grades before they are displayed is made consistent everywhere.<br />
* 2008-08-15 [https://github.com/moodle/moodle/commit/f9a2cf86a9c7a77bd0be1c17eca9260f0833f45e f9a2cf86] (T) Quiz grades are now consistently stored in the database as NUMEBER(10,5), and question grades as NUMBER(12,7).<br />
* 2008-08-29 [https://github.com/moodle/moodle/commit/62e76c6766368de71e6a7f7cd9a7fc17be942265 62e76c67] (P) Let students flag questions during quiz attempts.<br />
* 2008-09-09 [https://github.com/moodle/moodle/commit/8df9635465bd09d9624407289f11680bbf2c5f0e 8df96354] (AT) Admin page for managing the installed question types.<br />
* 2008-09-11 [https://github.com/moodle/moodle/commit/c308138f8994c55f17858f852be40c8d69ae9733 c308138f] (AT) Item analysis report removed.<br />
* 2008-11-20 [https://github.com/moodle/moodle/commit/fa583f5f6eb3b4c9f624e77df0cfb9f9e705e6c3 fa583f5f] (T) '''New editing UI for quizzes'''. Finnish Summer of Code project by Olli Savolainen.<br />
* 2008-11-28 [https://github.com/moodle/moodle/commit/f24493ec9b0e46c30c5343283dd10179a0fd892e f24493ec] (P) Allow essay questions to be selected by random questions.<br />
* 2009-01-07 [https://github.com/moodle/moodle/commit/a733c4b98b527ef66ea48eb4f0d11bc59ae89a56 a733c4b9] (A) Add an option to display the user's photo and name on the quiz attempt page.<br />
* 2009-01-14 [https://github.com/moodle/moodle/commit/96c7d771df88fd0aa2514ba898c89f81053c6e93 96c7d771] (AT) mod/quiz:reviewmyattempts capability separated from mod/quiz:attempt.<br />
* 2009-01-20 [https://github.com/moodle/moodle/commit/46795afcbdd7fe43de03afb6b2b87eb5c21ea691 46795afc] (T) refactoring of the code that displays the question bank, to eliminate duplication between the quiz editing and question bank display code.<br />
* 2009-02-25 [https://github.com/moodle/moodle/commit/cd120b2344d0c9d8f8bfa20466e3abb9fe0e4c8a cd120b23] (AT) New YUI pop-up for selecting the question type when adding a new question, replacing the old select menu.<br />
* 2009-05-06 [https://github.com/moodle/moodle/commit/6bf44482c651faa946fb2cf5a34475456258c708 6bf44482] (T) Moodle 2.0 $PAGE and $OUTPUT changes applied to the quiz.<br />
* 2009-05-29 [https://github.com/moodle/moodle/commit/83a15d025cb163509dcff124ed914058c826966f 83a15d02] (P) '''New question type 'Simple calculated' by Pierre Pichet.'''<br />
* 2009-06-05 [https://github.com/moodle/moodle/commit/aa9c6ecf02b25e967766ad09a23b668ebff83a7e aa9c6ecf] (A) Highlight the last question you edited in the question bank like. A small, but very useful change.<br />
* 2009-06-12 [https://github.com/moodle/moodle/commit/cf6155226cba2e4e62e9e1cb44dad88afacc39b4 cf615522] (T) require_js replaced by $PAGE->requires everywhere.<br />
* 2009-06-19 [https://github.com/moodle/moodle/commit/17da2e6f28d3477eb4ccfe5ac94c9cebb8456c8e 17da2e6f] (T) The concept of 'subplugins' is born. Quiz report, within the quiz, are one of the early examples. (Regrettably, the prefix quiz_, not quizreport_ is chosen.)<br />
* 2009-09-30 [https://github.com/moodle/moodle/commit/7d4dfc481e65a2548d32723a4726ddc833cdd1f5 7d4dfc48] (A) Integration with 'Safe Exam Browser' added.<br />
* 2010-02-07 [https://github.com/moodle/moodle/commit/2d279432b0c64c8dda20758641f529f87f14ea1f 2d279432] (P) '''New question type 'Calculated multiple choice' by Pierre Pichet.'''<br />
* 2010-03-08 [https://github.com/moodle/moodle/commit/990650f94cbe46344ced45c5fe69ebc273da1d00 990650f9] (A) Different open and close dates, etc., for different groups or individuals. Implemented by Matt Petro of the University of Wisconsin - Madison Engineering School.<br />
* 2010-05-20 [https://github.com/moodle/moodle/commit/9df209c1226b1859a0c3d534f026306d2dfc13f9 9df209c1] (T) Moodle events now triggered for starting and finishing quiz attempts.<br />
* 2010-05-21 [https://github.com/moodle/moodle/commit/56ed242b51909666b9e757f1a94fb2c105928b5e 56ed242b] (PA) New quiz option 'Show blocks during quiz attempts' by Sam Hemelryk.<br />
* 2010-08-06 [https://github.com/moodle/moodle/commit/d39ba35c34d4272d5092b5f80bacd2be6e7fc50f d39ba35c] (A) Make it clearer in the quiz grades report when essay questions need to be graded.<br />
* 2010-08-10 [https://github.com/moodle/moodle/commit/fe6ce2348945f267b3d90ed74442a221c0a9808d fe6ce234] (T) Quiz and question bank converted to the Moodle 2.0 Files API.<br />
* 2010-10-24 [https://github.com/moodle/moodle/commit/41941110fdecb6313637a6ad77c6e6e26aa79833 41941110] (T) Quiz and question bank converted to the Moodle 2.0 Backup and restore system.<br />
* 2010-10-30 [https://github.com/moodle/moodle/commit/92b360057504ecfb2b3f8174d06a32d7564314bf 92b36005] (P) Grading of units in numerical and calculated questions changed to work the way people would expect.<br />
== Moodle 2.0 release 24 November 2010 ==<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (PT) '''New moodle question engine, a major development by Tim Hunt, introduces the concept of Question behaviour, to handle the difference between adaptive, deferred feedback, and manually graded questions'''.<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (P) '''This also allows new behaviours like Certainty based marking, Immediate feedback, and Interactive with multiple tries.'''<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (T) Also in this change, many more unit tests for questions, and all questions now use renderers for output.<br />
* End Dec 2010 Moodle development moves from CVS to git.<br />
* 2011-02-11 [https://github.com/moodle/moodle/commit/fd214b596d63d2f7f8aff0e1d6550978f8ba60c7 fd214b59] (PT) Code to preserve the scroll position when submitting a question in the quiz, or editing the quiz.<br />
* 2011-03-10 [https://github.com/moodle/moodle/commit/894e8b4e93d8f3b4036ab738e2396a5eb0707c0a 894e8b4e] (P) New essay features: Use the HTML editor or not; control the size of the response area; allow attachments; and information to be shown to the person grading.<br />
* 2011-03-16 [https://github.com/moodle/moodle/commit/217f9a618ccc554a3650c2f9fbb9595215fd82fb 217f9a61] (T) As part of this, handling files are part of question responses now works properly, finally doing what 294e63ead tried.<br />
* 2011-04-26 [https://github.com/moodle/moodle/commit/606e07d574c649cedea92ff5bf3946f19a93e747 606e07d5] (T) Student-visible parts of the quiz converted to use a renderer, mostly thanks to Dean Lennard.<br />
* 2011-05-25 [https://github.com/moodle/moodle/commit/1da821bbde1348a67326ff7f676dff49182d4247 1da821bb] (PT) Introduce the concept of 'question variants' as a first-class concept in the question engine.<br />
* 2011-06-01 [https://github.com/moodle/moodle/commit/4b2da7cee08bea3c00338c5807f874a370c1c065 4b2da7ce] (A) Ability to restore 1.9 backups added to the quiz and question bank.<br />
* 2011-06-15 [https://github.com/moodle/moodle/commit/fde4560daeb9597142d9788f4e9051d36a9f67c2 fde4560d] (A) Admin page for managing the installed question behaviours.<br />
* 2011-06-16 [https://github.com/moodle/moodle/commit/2a6c5c52ee258b0097895c889cef949d8ab5ce72 2a6c5c52] (PT) Ability to have images in multiple choice answers restored. (It was broken since 2.0.)<br />
== Moodle 2.1 release 1 July 2011 ==<br />
* 2011-10-03 [https://github.com/moodle/moodle/commit/a28a5d74af1db4eeb12e194c0c9db111522458d2 a28a5d74] (T) Make the '''Quiz access rules''' (from 05866d85d) become proper sub-plugings of the quiz.<br />
* 2011-10-28 [https://github.com/moodle/moodle/commit/2dc54611f2c23e7b1686b26abc8f4fbda9c6531b 2dc54611] (AT) Unmaintained qti_two export format removed.<br />
* 2011-11-02 [https://github.com/moodle/moodle/commit/75a31c9039b1f06f6d1dca7b07282117de83aa41 75a31c90] (T) Plugin API made more standard in areas like cron, languages strings, for the question-related plugins.<br />
== Moodle 2.2 release 5 December 2011 ==<br />
* 2011-12-07 [https://github.com/moodle/moodle/commit/c2f5e2ab816e4bc067085b0f9c59b01739d945a9 c2f5e2ab] (T) Plugin API made more standard in areas like cron, languages strings, for the quiz-related plugins.<br />
* 2012-01-08 [https://github.com/moodle/moodle/commit/5db829494030a73d15dabdc8be8685497888b138 5db82949] (P) Quiz attempt tracks the page the student is currently on, and takes them back there if they leave the attempt and come back later. (By Charles Fulton)<br />
* 2012-03-07 [https://github.com/moodle/moodle/commit/88eca3cd2666a7ea451ecc8862867e68563d8bb7 88eca3cd] (A) New mod:quiz/addinstance lets you control which teachers can add a quiz to a course. (The same sort of capability is added to each activity.)<br />
* 2012-01-20 [https://github.com/moodle/moodle/commit/33c8d37b6f2fa380a50ef97d60103ed9a1f9c376 33c8d37b] (P) An option to force students to answer questions strictly in order, rather than letting them navigate around the quiz as they please. (By Charles Fulton)<br />
* ... hopefully much more yet to come.<br />
''Last updated 11th April 2012. This summary currently contains 148 items, whereas the full git log command at the top of this page lists 4777 commits.''<br />
== See also ==<br />
* [[Question API]]<br />
[[Category:Questions]]<br />
[[Category:Quiz]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=History_of_the_Moodle_quiz_and_question_bank&diff=61732History of the Moodle quiz and question bank2022-02-15T14:41:36Z<p>Tim+Hunt: /* Moodle 1.6 release 20 June 2006 */</p>
<hr />
<div>This is edited highlights from<br />
git log mod/quiz question lib/questionlib.php admin/qtypes.php admin/qbehaviours.php<br />
(If you prefer, substitute <tt>gitk</tt> for <tt>git log</tt> in that.) Particularly significant changes have be put in bold, but this is somewhat arbitrary.<br />
<br />
In several cases, the first commit purporting to add a feature was pretty broken, or minimal, and then more work was done to fix it up and make it actually work. In these cases, generally I have just picked out the first commit mentioning a particular feature.<br />
<br />
The headings mark points in time, so the things between the Moodle 1.0 and Moodle 1.1 headings are features that are new in Moodle 1.1. The funny numbers after the date are the commit hashes. They are a link to that change on github.<br />
<br />
The changes have been classified according to whether they are primarily P - pedagogic, A - administrative or T - technical.<br />
<br />
At the moment, I was inconsistent with attributing credit for features. That is just sloppiness on my part, and hopefully I will fix it some day.--[[User:Tim Hunt|Tim Hunt]] 04:33, 12 April 2012 (WST)<br />
<br />
''Does anyone know when Gustav Delius started being quiz maintainer?''<br />
== Moodle 1.0 release 20 August 2002 ==<br />
* 2002-10-04 [https://github.com/moodle/moodle/commit/730fd187c825ca8e71bf78a130a4d7ca4e1785bb 730fd187] (PAT) '''First version of quiz module added''' by Martin Dougiamas. The first feature that anyone was paid to write for Moodle!<br />
* 2002-10-06 [https://github.com/moodle/moodle/commit/14d8c0b4099b0d331bf6e766eac046e2259e173a 14d8c0b4] (P) '''First three question types created, Multiple-Choice, Short answer and True/false.'''<br />
* 2002-10-13 [https://github.com/moodle/moodle/commit/579ddad5ef181299080f8d75641f392300649441 579ddad5] (PA) '''first, very basic, grades report added.'''<br />
* 2002-10-14 [https://github.com/moodle/moodle/commit/7bd1aa1d648e801bd21fb5fa3030ef9c902f33dd 7bd1aa1d] (A) first quiz editing UI<br />
* 2002-10-15 [https://github.com/moodle/moodle/commit/2a2c9725bbadd1e4391e03b54eafdab23ad18ae8 2a2c9725] (A) editing UI for the first three types.<br />
* 2002-10-18 [https://github.com/moodle/moodle/commit/958aafe2b419978eb03d4ea622c93224d28602c7 958aafe2] (A) tracking start and end time of attempts.<br />
* 2002-10-20 [https://github.com/moodle/moodle/commit/c74a0ca5c24473ccf5dc1ba9b8a5b44dcecb2fb9 c74a0ca5] (A) question category editing UI. (Note, categories cannot be nested, but note the the ides of published categories to allow sharing between courses already exists.)<br />
* 2002-10-21 [https://github.com/moodle/moodle/commit/e1c91df09b9dc71758fec06de2c4809faa9700ae e1c91df0] (A) allow questions to be deleted.<br />
* 2002-10-22 [https://github.com/moodle/moodle/commit/e331eb06fdbb4adc5ebce3cbf4aacda7ce7a5ed5 e331eb06] (A) regrading implemented<br />
* 2002-12-09 [https://github.com/moodle/moodle/commit/9307692fdfd9c41d8ff1799df7c87e2d8c1c8475 9307692f] (PA) JavaScript confirmation before submitting an attempt.<br />
* 2003-01-01 [https://github.com/moodle/moodle/commit/8e6c87ccf3c11b9e2ca7cfd222b6e2a0c67a93db 8e6c87cc] (PA) Teachers can enable students to review, but only after the quiz close date.<br />
* 2003-02-16 [https://github.com/moodle/moodle/commit/49220fa70cc90013773771727f0f36103a19f88b 49220fa7] (A) Framework for quiz import/export formats. Only one real format for now, missingword.<br />
* 2003-02-24 [https://github.com/moodle/moodle/commit/95dbc030a88308873fe0f97261bb0c847c364ad7 95dbc030] (P) '''Random short-answer match qtype added.'''<br />
* 2003-03-30 [https://github.com/moodle/moodle/commit/54a67a59218c7c5242a1398e5f3d08f23c9974d2 54a67a59] (P) '''Matching question type added.'''<br />
* 2003-04-09 [https://github.com/moodle/moodle/commit/34d52ad7d29675bc1f1c6275bddf896e262145be 34d52ad7] (P) '''Random questions added.'''<br />
* 2003-04-09 [https://github.com/moodle/moodle/commit/4b85b717128765ec207048e0006cdc25c10d7ac8 4b85b717] (P) Shuffle questions and shuffle answers features added.<br />
* 2003-05-02 [https://github.com/moodle/moodle/commit/c6bcd06abac61a6d15a8f9b4d4bb12090eb93bbb c6bcd06a] (A) AON and Blackboard import formats added.<br />
* 2003-07-06 [https://github.com/moodle/moodle/commit/401c8de6c55a348b3de7d2e8d785d59e1d5f6712 401c8de6] (P) '''Description question type added.'''<br />
* 2003-07-09 [https://github.com/moodle/moodle/commit/d7c93ec8fa8d11f63998ab9fd78c2c2f41045568 d7c93ec8] (A) Backup and restore added to the quiz.<br />
* 2003-07-10 [https://github.com/moodle/moodle/commit/361f649d7ad7ddf2d0af1932505a6dd316559fb6 361f649d] (P) '''Numerical qtype added.'''<br />
* 2003-07-24 [https://github.com/moodle/moodle/commit/29d5d0b40c31f1b589af9c91598676dae9b6444e 29d5d0b4] (T) Quiz reports made into a sort-of plugin.<br />
* 2003-07-24 [https://github.com/moodle/moodle/commit/c90f563e398f20b0cf473efb55bbf9b8ffb35420 c90f563e] (PA) simplestat report added.<br />
* 2003-07-28 [https://github.com/moodle/moodle/commit/250e71d96747693f40eb7db6eb40ba166b897a96 250e71d9] (A) countdown time when less than 24 hours from the close date.<br />
* 2003-08-01 [https://github.com/moodle/moodle/commit/8b439f8c164c15d39c3fa1bec029b616df5281dc 8b439f8c] (P) '''Multi-answer question type.'''<br />
* 2003-08-03 [https://github.com/moodle/moodle/commit/0f36ecb9ea9634c6b0732ebf06bc36707d3ecba6 0f36ecb9] (P) Each attempt builds on the last added<br />
== Moodle 1.1 release 29 August 2003 ==<br />
* 2003-09-10 [https://github.com/moodle/moodle/commit/ed1daaa9d7b5d7e1e8885854d7f2add117c4f24c ed1daaa9] (P) First support for ungraded quizzes.<br />
* 2003-10-15 [https://github.com/moodle/moodle/commit/857e0dfdd5ee3501eea54178829c094784bbd1f2 857e0dfd] (A) Course test manager import format.<br />
* 2003-11-20 [https://github.com/moodle/moodle/commit/565e970ee212aa5a355890ff85a14828b4bf735a 565e970e] (PA) fullstat report by Thomas Robb<br />
* 2003-11-20 [https://github.com/moodle/moodle/commit/7c9c2a8da68f420a8fa04ae1a90493a1dbe4f633 7c9c2a8d] (P) allow negative grades for multiple-choice.<br />
* 2003-12-01 [https://github.com/moodle/moodle/commit/0315927955b0877d957453ae617b527d3a70d453 03159279] (A) Aiken import format.<br />
* 2003-12-12 [https://github.com/moodle/moodle/commit/43bf9fc2d71450ec1fb91cd739814a5b20dad12a 43bf9fc2] (T) Improved plug-in formation for import/export formats.<br />
* 2003-12-12 [https://github.com/moodle/moodle/commit/43bf9fc2d71450ec1fb91cd739814a5b20dad12a 43bf9fc2] (A) '''GIFT format added.'''<br />
* 2003-12-29 [https://github.com/moodle/moodle/commit/0ce4aa1a8a381f2014d46e6ee5b04db1bdef8e23 0ce4aa1a] (P) Short-answer qtype enhanced to allow wild-cards.<br />
* 2004-01-11 [https://github.com/moodle/moodle/commit/998ebd420ab6c71aa1ac555287ce7ffcd4db8672 998ebd42] (A) WebCT import format added.<br />
* 2004-01-13 [https://github.com/moodle/moodle/commit/a9981ba6194c438aace048e9fc3f8130a3155542 a9981ba6] (A) Matching questions added to GIFT format<br />
* 2004-02-14 [https://github.com/moodle/moodle/commit/831b236f2c68b252203dcf4a9ad68a7191fbfc16 831b236f] (A) Groups support added to the quiz reports.<br />
* 2004-02-16 [https://github.com/moodle/moodle/commit/bbcbc0fecc7f8c7f5b71424864bdef4f1b540c17 bbcbc0fe] (P) '''First version of lesson module added.'''<br />
== Moodle 1.2 release 20 March 2004 ==<br />
* 2004-05-19 [https://github.com/moodle/moodle/commit/56215ed40f5f46aa0d1943585784e7327ea724e7 56215ed4] (A) Warn teachers if they are editing a quiz with attempts.<br />
== Moodle 1.3 release 25 May 2004 ==<br />
* 2004-06-02 [https://github.com/moodle/moodle/commit/f41e824f33414e6184611a6d1708cd3a58ec9058 f41e824f] (PA) Time limit feature added.<br />
* 2004-07-07 [https://github.com/moodle/moodle/commit/88c898f590b12bbb6bcff1c7e482669e17ab5115 88c898f5] (A) Password and subnet restrictions added.<br />
* 2004-07-21 [https://github.com/moodle/moodle/commit/8966a111310d0cc1c7012d68bcd137a5bafdf11f 8966a111] (T) '''Question types made plug-ins''', although still within mod/quiz.<br />
* 2004-07-30 [https://github.com/moodle/moodle/commit/8c5a95facbeff21a356396a588446ed77713cb9e 8c5a95fa] (P) '''Calculated question type added.'''<br />
* 2004-07-30 [https://github.com/moodle/moodle/commit/7a82d193240ab6a3df435ac2c89821864d5d2ee4 7a82d193] (P) '''Units added to numerical (and calculate) question types.'''<br />
* 2004-08-06 [https://github.com/moodle/moodle/commit/bbb4e32d3c07fa2192f54cebddf677d9938bf8b1 bbb4e32d] (A) '''Moodle XML export format added.'''<br />
* 2004-08-16 [https://github.com/moodle/moodle/commit/9c8047cfd07c5da2393720063949f448cd185c07 9c8047cf] (PA) '''Question preview feature added.'''<br />
== Moodle 1.4 release 31 August 2004 ==<br />
* 2004-12-16 [https://github.com/moodle/moodle/commit/6c83959e33ddd8978aa2a88af4f47bfeb97af5d4 6c83959e] (A) 'Secure pop-up' mode added.<br />
* 2004-12-16 [https://github.com/moodle/moodle/commit/d6b3c7b82e9f385daf6f9d642e8112a6bc7298ce d6b3c7b8] (A) Moodle XML export added.<br />
* 2004-12-23 [https://github.com/moodle/moodle/commit/a5c0990e5d5477f743dddd234312e0cf5223e22e a5c0990e] (A) Config page to allow admins to set default quiz options.<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/34283aa87d2a37fd237723c24c8da2b93a5bbec2 34283aa8] (A) 'Show advanced' button added to the quiz settings form. (Copying what is already done in the Resource module.)<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/34283aa87d2a37fd237723c24c8da2b93a5bbec2 34283aa8] (PA) Start of more sophisticated review options.<br />
* 2005-01-02 [https://github.com/moodle/moodle/commit/ac27e47dc48dbe82b19e24ae59e281b74e758213 ac27e47d] (A) Hierarchical question categories.<br />
* 2005-01-03 [https://github.com/moodle/moodle/commit/d70ccc495ca904789940f281655b94d9a8e8637b d70ccc49] (P) Multi-page quizzes allowed<br />
* 2005-01-25 [https://github.com/moodle/moodle/commit/1680925333d35cb0ed0209f3b5c27fc681c9d278 16809253] (A) Learnwise question import format<br />
* 2005-02-01 [https://github.com/moodle/moodle/commit/bdfa14dd7f34ada369dc430dc1f9f82dcc93b7dc bdfa14dd] (PA) Allow blocks on the quiz view page<br />
* 2005-02-14 [https://github.com/moodle/moodle/commit/72036f9305517224f9bdc67771f2bfde93c143a2 72036f93] (A) Now a teacher option for number of decimal points to show for grades.<br />
* 2005-02-17 [https://github.com/moodle/moodle/commit/06e273a1c3496a67193a16485ff695d273f69523 06e273a1] (A) attempt at adding QTI 2.0 export.<br />
* 2005-03-03 [https://github.com/moodle/moodle/commit/c6bfdec3fc8d2db34be464bc01e573e23e54e748 c6bfdec3] (AT) attempt at adding question versioning, that never really got anywhere.<br />
* 2005-05-06 [https://github.com/moodle/moodle/commit/ee1fb969c8274130c0e7a7317dd69a8d48e0e54f ee1fb969] (P) '''adaptive mode added''' by Gustav Delius et al of the Serving Mathematics project.<br />
* 2005-05-15 [https://github.com/moodle/moodle/commit/0fc5939983046b8c00a49a1ed42381da195619f6 0fc59399] (PA) '''Item analysis report added''' by Enrique Castro<br />
* 2005-05-16 [https://github.com/moodle/moodle/commit/691d06114e40e1889d2dce7012272463dd60cba1 691d0611] (A) Examview import format.<br />
* 2005-06-04 [https://github.com/moodle/moodle/commit/7bbe08a267f262736df50a130066a076a6c6e095 7bbe08a2] (AT) simplest and fullstat reports removed.<br />
== Moodle 1.5 release 5 June 2005 ==<br />
* 2005-06-26 [https://github.com/moodle/moodle/commit/ed460c8e04d08944a778587b16f4bb22aac043ac ed460c8e] (P) Essay question type by Mark Nielsen<br />
* 2005-07-22 [https://github.com/moodle/moodle/commit/80ed3fe6b02b1364bf1c1f0d625e590275caa1f8 80ed3fe6] (PA) Responses report added (temporarily)<br />
* 2006-02-08 [https://github.com/moodle/moodle/commit/401c3496ae9668f1f0e6f33745afa8e73e11f8e2 401c3496] (P) Option for an enforced delay between attempts.<br />
* 2006-02-19 [https://github.com/moodle/moodle/commit/14afbbf0344c275e655b0d51eb01fee7cdb0ce0b 14afbbf0] (A) Tool for re-ordering all the questions in a quiz at once.<br />
* 2006-02-24 [https://github.com/moodle/moodle/commit/516cf3eb59ae523f7997616502603793f38fae9a 516cf3eb] (T) '''Question bank code and question types moved from mod/quiz -> question.'''<br />
* 2006-03-01 [https://github.com/moodle/moodle/commit/03c8c27ee00d4c5d9ab347d4dfdbf5d7a11191fa 03c8c27e] (PA) Option to show students with/without attempts in the quiz reports.<br />
* 2006-03-08 [https://github.com/moodle/moodle/commit/d1c974813032984dd852ea3f4586f04d8eecb817 d1c97481] (A) Blackboard 6 question import format.<br />
* 2006-03-22 [https://github.com/moodle/moodle/commit/ead293420d0baf8af94309fa0e8b0518d8f68711 ead29342] (T) Question types now a proper sort of plugin.<br />
* 2006-03-24 [https://github.com/moodle/moodle/commit/4eda4eecbd1b7fd7dc64a95ed34d6e9ad97a4a48 4eda4eec] (T) 'Missing' qtype added.<br />
* 2006-03-26 [https://github.com/moodle/moodle/commit/5f9ef821df8f4bd984e11cf41931802f72efc885 5f9ef821] (AT) Responses report moved from core to contrib (undoing 80ed3fe6b).<br />
* 2006-03-27 [https://github.com/moodle/moodle/commit/31e95855b85d551f249a2d7bed0d5479e159d3b3 31e95855] (T) Quiz report plugin structure improved.<br />
* 2006-04-07 [https://github.com/moodle/moodle/commit/b6e907a245ddbe17a69125725717625e3ede3b72 b6e907a2] (PA) Manual grading made applicable to all qtypes, not just Essay.<br />
* July 2006 '''Tim Hunt takes over as quiz maintainer'''<br />
== Moodle 1.6 release 20 June 2006 ==<br />
* 2006-07-04 [https://github.com/moodle/moodle/commit/a58ffe3fe2526e04f21c1d95786cd027a82f4371 a58ffe3f] (P) Allow matching questions to have extra distractors.<br />
* 2006-07-12 [https://github.com/moodle/moodle/commit/1fe641f7b43b63cb5289b0ffa8b6c4e1f2ee61ff 1fe641f7] (P) Support for matching common wrong, or partially correct, responses to numeric questions, not just one right answer.<br />
* 2006-08-08 [https://github.com/moodle/moodle/commit/bbbf2d401564ade2548592853586005a7bcde900 bbbf2d40] (AT) Roles and permissions system added to Moodle.<br />
* 2006-08-11 [https://github.com/moodle/moodle/commit/1b8a7434e28f5508a3f7ae116192a3ac7234543d 1b8a7434] (P) '''General feedback added to all types. (It was initially called something else, then renamed in a4514d91d)'''.<br />
* 2006-08-11 [https://github.com/moodle/moodle/commit/613f306d1d68aaf826d8b6ccf26cced0dc2fa928 613f306d] (T) Moodle database code changed to use XMLDB.<br />
* 2006-08-22 [https://github.com/moodle/moodle/commit/212b7b8cd9af682fc32c76d1bfd6172ead62a27c 212b7b8c] (P) Quiz overall feedback added.<br />
* 2006-08-24 [https://github.com/moodle/moodle/commit/307f045f0718da95d00faf38a630d4f3169f12e5 307f045f] (P) '''Overall feedback options added to multiple-choice questions'''.<br />
== Moodle 1.7 release 7 November 2006 ==<br />
* 2006-11-29 [https://github.com/moodle/moodle/commit/ee259d0cd1f05219547de294e60656d303462ac3 ee259d0c] (A) Support for including category information in GIFT and Moodle XML export files.<br />
* 2006-12-19 [https://github.com/moodle/moodle/commit/a23f0aaf9570886bf5803459f0018dd68e835328 a23f0aaf] (T) Moodle converted to use formslib.php, rather than hand-coded forms.<br />
* 2006-12-21 [https://github.com/moodle/moodle/commit/77c7f0f549e24c7a1d180967379c64af77515105 77c7f0f5] (A) Open Office format support added to quiz report downloads.<br />
* 2007-02-20 [https://github.com/moodle/moodle/commit/624cbc9c26a5f4b56083b2c1321891f0af62bc82 624cbc9c] (A) Option to display the question text when browsing the question bank.<br />
== Moodle 1.8 release 30 March 2007 ==<br />
* 2007-04-13 [https://github.com/moodle/moodle/commit/3e0647ffaf2c81224b6f7d2ed24d5188888fcfb5 3e0647ff] (P) Options for how multiple choice choices are numbered.<br />
* 2007-06-15 [https://github.com/moodle/moodle/commit/294e63eadd0c49ed829c055111c15e08ab56d789 294e63ea] (PT) First attempt to allow students to upload files during attempts. (Gets broken in the changes to 2.0, and was never completely working, e.g. backup and restore never worked.)<br />
* 2007-06-19 [https://github.com/moodle/moodle/commit/7a6f4066cee03e8db752a66d667d91b9b28f9ea5 7a6f4066] (A) Course reset implemented for quizzes.<br />
* 2007-06-26 [https://github.com/moodle/moodle/commit/ac48e43a896d1a6315c38e3aac5a3c5f0d327cb8 ac48e43a] (A) Email notification/confirmation of submitted quiz attempts.<br />
* 2007-07-21 [https://github.com/moodle/moodle/commit/e8825e724bf6f916752a067c9be983295729ed4f e8825e72] (A) Support for essay and description qtypes added to GIFT.<br />
* 2007-07-22 [https://github.com/moodle/moodle/commit/42ff9ce68b932f844a326c4b8197cdcbd74ea002 42ff9ce6] (A) '''Support for the new gradebook added to the quiz.'''<br />
* 2007-07-30 [https://github.com/moodle/moodle/commit/00719c02d66fca180334d22b4e0cf781a8ef4c27 00719c02] (PA) Separate review option for quiz overall feedback.<br />
* 2007-08-08 [https://github.com/moodle/moodle/commit/a41e328736f4cdd95c62277346832c19da93115a a41e3287] (T) Allow third-party qtype plugins to participate in GIFT and Moodle XML import export.<br />
* 2007-08-09 [https://github.com/moodle/moodle/commit/271e6decdac9d9445c047a7d90cc98b7912cf1b6 271e6dec] (AT) '''New question bank''' by Jamie Pratt. Cleaner code. Many problems with sharing questions between courses fixed. Finer-grained capabilities.<br />
* 2007-08-27 [https://github.com/moodle/moodle/commit/5ada3c8e3aa858d7e11ccf5e92cbad78f813d691 5ada3c8e] (A) Support for Groupings added to the quiz.<br />
* 2007-10-11 [https://github.com/moodle/moodle/commit/14e66f3bebac8c587d08e14f92d6f8332c26161d 14e66f3b] (A) Overridden grades from the gradebook shown in the quiz UI.<br />
== Moodle 1.9 release 3 March 2008 ==<br />
* 2008-03-06 [https://github.com/moodle/moodle/commit/05866d85d4155a632bb988b8c5a16252df69b7a3 05866d85] (T) Code for all the different different rules about whether a student can attempt the quiz now moved into separate classes. Not yet a proper plugin type.<br />
* 2008-05-07 [https://github.com/moodle/moodle/commit/8b87ab000003e7cc830fb959b72d80de79b84cd2 8b87ab00] (PA) Summary graph added to the quiz overview report. (This is the start of a set of '''major improvements to the quiz reports for Moodle 2.0''', done by Jamie Pratt for the OU.)<br />
* 2008-05-15 [https://github.com/moodle/moodle/commit/aad5b0fca94bbc278f754634134a3839267ceb36 aad5b0fc] (PA) Group and course averages added to the overview report.<br />
* 2008-05-15 [https://github.com/moodle/moodle/commit/f33e1ed4ae4948e337e5fee61adc3580f81dfa80 f33e1ed4] (T) Moodle database connection changed to use the new global $DB.<br />
* 2008-05-23 [https://github.com/moodle/moodle/commit/a59eb2b6a8e569ea5777f6cfa1d9aab9669bb79f a59eb2b6] (A) Groups support added to the Manual grading report.<br />
* 2008-06-10 [https://github.com/moodle/moodle/commit/0c1c764e8257d6db589ed0d89371d4b49b8972d7 0c1c764e] (PA) '''Quiz statistics report added.'''<br />
* 2008-06-27 [https://github.com/moodle/moodle/commit/36e413e38c5d04c923f62e2525b2d59767babfc8 36e413e3] (P) '''Quiz attempt UI greatly improved, with new navigation panel and summary page.'''<br />
* 2008-07-11 [https://github.com/moodle/moodle/commit/98f38217bb6de4ffa78f79e7371b5d8f53aaf98a 98f38217] (T) Regrading UI merged into overview report. Dry run of regrades made possible, before doing it for real.<br />
* 2008-07-20 [https://github.com/moodle/moodle/commit/7f29a7dbe40d21dcbc5f0d21a399c2e6f7b3c98b 7f29a7db] (PA) '''Responses report moved back out of contrib, and in to standard Moodle.'''<br />
* 2008-07-24 [https://github.com/moodle/moodle/commit/17f1782c1217ab5b83de6bd55a4e7a7adb0abe5a 17f1782c] (T) cron support added to quiz reports.<br />
* 2008-08-15 [https://github.com/moodle/moodle/commit/f88fb62c40249c74475de64eedeae2c3a549441c f88fb62c] (AT) rounding of quiz and question grades before they are displayed is made consistent everywhere.<br />
* 2008-08-15 [https://github.com/moodle/moodle/commit/f9a2cf86a9c7a77bd0be1c17eca9260f0833f45e f9a2cf86] (T) Quiz grades are now consistently stored in the database as NUMEBER(10,5), and question grades as NUMBER(12,7).<br />
* 2008-08-29 [https://github.com/moodle/moodle/commit/62e76c6766368de71e6a7f7cd9a7fc17be942265 62e76c67] (P) Let students flag questions during quiz attempts.<br />
* 2008-09-09 [https://github.com/moodle/moodle/commit/8df9635465bd09d9624407289f11680bbf2c5f0e 8df96354] (AT) Admin page for managing the installed question types.<br />
* 2008-09-11 [https://github.com/moodle/moodle/commit/c308138f8994c55f17858f852be40c8d69ae9733 c308138f] (AT) Item analysis report removed.<br />
* 2008-11-20 [https://github.com/moodle/moodle/commit/fa583f5f6eb3b4c9f624e77df0cfb9f9e705e6c3 fa583f5f] (T) '''New editing UI for quizzes'''. Finnish Summer of Code project by Olli Savolainen.<br />
* 2008-11-28 [https://github.com/moodle/moodle/commit/f24493ec9b0e46c30c5343283dd10179a0fd892e f24493ec] (P) Allow essay questions to be selected by random questions.<br />
* 2009-01-07 [https://github.com/moodle/moodle/commit/a733c4b98b527ef66ea48eb4f0d11bc59ae89a56 a733c4b9] (A) Add an option to display the user's photo and name on the quiz attempt page.<br />
* 2009-01-14 [https://github.com/moodle/moodle/commit/96c7d771df88fd0aa2514ba898c89f81053c6e93 96c7d771] (AT) mod/quiz:reviewmyattempts capability separated from mod/quiz:attempt.<br />
* 2009-01-20 [https://github.com/moodle/moodle/commit/46795afcbdd7fe43de03afb6b2b87eb5c21ea691 46795afc] (T) refactoring of the code that displays the question bank, to eliminate duplication between the quiz editing and question bank display code.<br />
* 2009-02-25 [https://github.com/moodle/moodle/commit/cd120b2344d0c9d8f8bfa20466e3abb9fe0e4c8a cd120b23] (AT) New YUI pop-up for selecting the question type when adding a new question, replacing the old select menu.<br />
* 2009-05-06 [https://github.com/moodle/moodle/commit/6bf44482c651faa946fb2cf5a34475456258c708 6bf44482] (T) Moodle 2.0 $PAGE and $OUTPUT changes applied to the quiz.<br />
* 2009-05-29 [https://github.com/moodle/moodle/commit/83a15d025cb163509dcff124ed914058c826966f 83a15d02] (P) '''New question type 'Simple calculated' by Pierre Pichet.'''<br />
* 2009-06-05 [https://github.com/moodle/moodle/commit/aa9c6ecf02b25e967766ad09a23b668ebff83a7e aa9c6ecf] (A) Highlight the last question you edited in the question bank like. A small, but very useful change.<br />
* 2009-06-12 [https://github.com/moodle/moodle/commit/cf6155226cba2e4e62e9e1cb44dad88afacc39b4 cf615522] (T) require_js replaced by $PAGE->requires everywhere.<br />
* 2009-06-19 [https://github.com/moodle/moodle/commit/17da2e6f28d3477eb4ccfe5ac94c9cebb8456c8e 17da2e6f] (T) The concept of 'subplugins' is born. Quiz report, within the quiz, are one of the early examples. (Regrettably, the prefix quiz_, not quizreport_ is chosen.)<br />
* 2009-09-30 [https://github.com/moodle/moodle/commit/7d4dfc481e65a2548d32723a4726ddc833cdd1f5 7d4dfc48] (A) Integration with 'Safe Exam Browser' added.<br />
* 2010-02-07 [https://github.com/moodle/moodle/commit/2d279432b0c64c8dda20758641f529f87f14ea1f 2d279432] (P) '''New question type 'Calculated multiple choice' by Pierre Pichet.'''<br />
* 2010-03-08 [https://github.com/moodle/moodle/commit/990650f94cbe46344ced45c5fe69ebc273da1d00 990650f9] (A) Different open and close dates, etc., for different groups or individuals. Implemented by Matt Petro of the University of Wisconsin - Madison Engineering School.<br />
* 2010-05-20 [https://github.com/moodle/moodle/commit/9df209c1226b1859a0c3d534f026306d2dfc13f9 9df209c1] (T) Moodle events now triggered for starting and finishing quiz attempts.<br />
* 2010-05-21 [https://github.com/moodle/moodle/commit/56ed242b51909666b9e757f1a94fb2c105928b5e 56ed242b] (PA) New quiz option 'Show blocks during quiz attempts' by Sam Hemelryk.<br />
* 2010-08-06 [https://github.com/moodle/moodle/commit/d39ba35c34d4272d5092b5f80bacd2be6e7fc50f d39ba35c] (A) Make it clearer in the quiz grades report when essay questions need to be graded.<br />
* 2010-08-10 [https://github.com/moodle/moodle/commit/fe6ce2348945f267b3d90ed74442a221c0a9808d fe6ce234] (T) Quiz and question bank converted to the Moodle 2.0 Files API.<br />
* 2010-10-24 [https://github.com/moodle/moodle/commit/41941110fdecb6313637a6ad77c6e6e26aa79833 41941110] (T) Quiz and question bank converted to the Moodle 2.0 Backup and restore system.<br />
* 2010-10-30 [https://github.com/moodle/moodle/commit/92b360057504ecfb2b3f8174d06a32d7564314bf 92b36005] (P) Grading of units in numerical and calculated questions changed to work the way people would expect.<br />
== Moodle 2.0 release 24 November 2010 ==<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (PT) '''New moodle question engine, a major development by Tim Hunt, introduces the concept of Question behaviour, to handle the difference between adaptive, deferred feedback, and manually graded questions'''.<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (P) '''This also allows new behaviours like Certainty based marking, Immediate feedback, and Interactive with multiple tries.'''<br />
* 2010-12-20 [https://github.com/moodle/moodle/commit/d1b7e03d5d507243d9f8adb9465161f3702f4a12 d1b7e03d] (T) Also in this change, many more unit tests for questions, and all questions now use renderers for output.<br />
* End Dec 2010 Moodle development moves from CVS to git.<br />
* 2011-02-11 [https://github.com/moodle/moodle/commit/fd214b596d63d2f7f8aff0e1d6550978f8ba60c7 fd214b59] (PT) Code to preserve the scroll position when submitting a question in the quiz, or editing the quiz.<br />
* 2011-03-10 [https://github.com/moodle/moodle/commit/894e8b4e93d8f3b4036ab738e2396a5eb0707c0a 894e8b4e] (P) New essay features: Use the HTML editor or not; control the size of the response area; allow attachments; and information to be shown to the person grading.<br />
* 2011-03-16 [https://github.com/moodle/moodle/commit/217f9a618ccc554a3650c2f9fbb9595215fd82fb 217f9a61] (T) As part of this, handling files are part of question responses now works properly, finally doing what 294e63ead tried.<br />
* 2011-04-26 [https://github.com/moodle/moodle/commit/606e07d574c649cedea92ff5bf3946f19a93e747 606e07d5] (T) Student-visible parts of the quiz converted to use a renderer, mostly thanks to Dean Lennard.<br />
* 2011-05-25 [https://github.com/moodle/moodle/commit/1da821bbde1348a67326ff7f676dff49182d4247 1da821bb] (PT) Introduce the concept of 'question variants' as a first-class concept in the question engine.<br />
* 2011-06-01 [https://github.com/moodle/moodle/commit/4b2da7cee08bea3c00338c5807f874a370c1c065 4b2da7ce] (A) Ability to restore 1.9 backups added to the quiz and question bank.<br />
* 2011-06-15 [https://github.com/moodle/moodle/commit/fde4560daeb9597142d9788f4e9051d36a9f67c2 fde4560d] (A) Admin page for managing the installed question behaviours.<br />
* 2011-06-16 [https://github.com/moodle/moodle/commit/2a6c5c52ee258b0097895c889cef949d8ab5ce72 2a6c5c52] (PT) Ability to have images in multiple choice answers restored. (It was broken since 2.0.)<br />
== Moodle 2.1 release 1 July 2011 ==<br />
* 2011-10-03 [https://github.com/moodle/moodle/commit/a28a5d74af1db4eeb12e194c0c9db111522458d2 a28a5d74] (T) Make the '''Quiz access rules''' (from 05866d85d) become proper sub-plugings of the quiz.<br />
* 2011-10-28 [https://github.com/moodle/moodle/commit/2dc54611f2c23e7b1686b26abc8f4fbda9c6531b 2dc54611] (AT) Unmaintained qti_two export format removed.<br />
* 2011-11-02 [https://github.com/moodle/moodle/commit/75a31c9039b1f06f6d1dca7b07282117de83aa41 75a31c90] (T) Plugin API made more standard in areas like cron, languages strings, for the question-related plugins.<br />
== Moodle 2.2 release 5 December 2011 ==<br />
* 2011-12-07 [https://github.com/moodle/moodle/commit/c2f5e2ab816e4bc067085b0f9c59b01739d945a9 c2f5e2ab] (T) Plugin API made more standard in areas like cron, languages strings, for the quiz-related plugins.<br />
* 2012-01-08 [https://github.com/moodle/moodle/commit/5db829494030a73d15dabdc8be8685497888b138 5db82949] (P) Quiz attempt tracks the page the student is currently on, and takes them back there if they leave the attempt and come back later. (By Charles Fulton)<br />
* 2012-03-07 [https://github.com/moodle/moodle/commit/88eca3cd2666a7ea451ecc8862867e68563d8bb7 88eca3cd] (A) New mod:quiz/addinstance lets you control which teachers can add a quiz to a course. (The same sort of capability is added to each activity.)<br />
* 2012-01-20 [https://github.com/moodle/moodle/commit/33c8d37b6f2fa380a50ef97d60103ed9a1f9c376 33c8d37b] (P) An option to force students to answer questions strictly in order, rather than letting them navigate around the quiz as they please. (By Charles Fulton)<br />
* ... hopefully much more yet to come.<br />
''Last updated 11th April 2012. This summary currently contains 148 items, whereas the full git log command at the top of this page lists 4777 commits.''<br />
== See also ==<br />
* [[Question API]]<br />
[[Category:Questions]]<br />
[[Category:Quiz]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Javascript_Modules&diff=61656Javascript Modules2022-01-27T15:18:07Z<p>Tim+Hunt: Update docs to match this month's flavour of the month for JS></p>
<hr />
<div>{{Moodle 2.9}}<br />
= Javascript Modules =<br />
== What is a Javascript module and why do I care? ==<br />
A Javascript module is nothing more than a collection of Javascript code that can be used (reliably) from other pieces of Javascript. <br />
== Why should I package my code as a module? ==<br />
By packaging your code as a module you break your code up into smaller reusable pieces. This is good because:<br />
<br />
a) Each smaller piece is simpler to understand / debug<br />
<br />
b) Each smaller piece is simpler to test<br />
<br />
c) You can re-use common code instead of duplicating it<br />
= How do I write a Javascript module in Moodle? =<br />
Since version 2.9, Moodle supports Javascript modules written using the Asynchronous Module Definition ([https://github.com/amdjs/amdjs-api/wiki/AMD AMD]) API. This is a standard API for creating Javascript modules and you will find many useful third party libraries that are already using this format. <br />
<br />
To edit or create an AMD module in Moodle you need to do a couple of things. <br />
<br />
Since version 3.8, Moodle supports [https://github.com/lukehoban/es6features#readme ECMAScript 2015 features] (aka ES6) in a cross browser compatible way thanks to [https://babeljs.io/ Babel JS]. In order to achieve the compatibility with older browsers Babel will compile the newer ES6 features back into ES5 Javascript. Unfortunately this means that in order for your Javascript changes to show in the browser they must be compiled by running [[Grunt]], even with the cachejs config setting set to false (i.e. "Development mode").<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module '''must''' be written on ES6.<br />
== Install NVM and Node ==<br />
The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.<br />
<br />
https://github.com/nvm-sh/nvm#installing-and-updating<br />
<br />
Confirm it is working:<br />
$ nvm --version<br />
0.35.3<br />
After you have installed '''nvm''', you should install the correct version of NodeJS by running the following commands from your Moodle directory:<br />
nvm install<br />
nvm use<br />
If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:<br />
nvm alias default {{NodeJSExactVersion}}<br />
== Install grunt ==<br />
The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.<br />
<br />
Once this is done, you can run the the following commands from your Moodle directory:<br />
npm install<br />
'''This may mention vulnerabilities, that's fine and doesn't apply.'''<br />
npm install -g grunt-cli<br />
== Development mode (Moodle v2.9 to v3.7) ==<br />
To avoid having to constantly run grunt, make sure you set the following in your config.php<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Moodle will now run your module from the amd/src module. Don't forget to switch this off and run 'grunt' before deploying the new version!<br />
<br />
In this mode - if you get a strange message in your javascript console like "No define call for core/first" it means you have a syntax error in the javascript you are developing.<br />
Or, "No define call for theme_XXX/loader" as you are probably missing the 'src' folder with relevant JS files. which might happen when you turn debugging ON on a theme that was bought, without 'src' folder :-(<br />
== Development mode (Moodle v3.8 and above) ==<br />
All Javascript code is now compiled using Babel which means Moodle will only ever serve minified Javascript to the browser, even in development mode. However in development mode Moodle will also send the browser the corresponding source map files for each of the Javascript modules. The source map files will tell the browser how to map the minified source code back to the unminified original source code so that the original source files will be displayed in the sources section of the browser's development tools.<br />
<br />
While in development mode each of the Javascript modules will appear in the browser's source tree as separate modules (no more giant first.js file!) and they will also be loaded with individual network requests (this is a compromise we had to make thanks to some browser bugs with source map files).<br />
<br />
To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:<br />
<syntaxhighlight lang="php"><br />
// Prevent JS caching<br />
$CFG->cachejs = false;<br />
</syntaxhighlight><br />
Since all Javascript must now be compiled you must run [[Grunt]] in order for you changes to appear in the browser. However rather than running Grunt manually each time on either the whole project or each file you modified, it is recommended that you just run the '''grunt watch''' task at the root of your Moodle directory. The grunt watch task will listen for changes to the Javascript files in the Moodle directory and will automatically lint and compile only the file that is changed after each change is detected. This removes the need to manually run grunt after each change.<br />
== Development mode (Moodle v3.10 and above) ==<br />
All the above for Moodle 3.8 and up applies, plus (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
== Running grunt ==<br />
You can run grunt in your plugin's 'amd' directory and it will only operate on your modules. If you're having problems or just want to check your work it is worth running for the 'lint' feature. This can find basic problems. This sub-directory support wont work on Windows unfortunately but there is an alternative: Run grunt from the top directory with the --root=path/to/dir to limit execution to a sub-directory.<br />
<br />
See [[Grunt#Running_grunt]] for more details of specific grunt commands which can be used.<br />
<br />
If you get the error message<br />
/usr/bin/env: node: No such file or directory<br />
Then see the thread https://github.com/nodejs/node-v0.x-archive/issues/3911<br />
<br />
On Ubuntu 14.04 this fixed it for me:<br />
sudo ln -fs /usr/bin/nodejs /usr/local/bin/node<br />
Note: Once you have run grunt and built your code, you will then need to purge Moodle caches otherwise the changes made to your minified files may not be picked up by Moodle.<br />
== ES6 Modules (Moodle v3.8 and above) ==<br />
In addition to AMD module syntax Moodle now supports the [https://github.com/lukehoban/es6features#modules ES6 syntax] for writing Javascript modules. All modules (defined using either syntax) are compatible with one another. Behind the scenes the ES6 module syntax is converted into an AMD syntax as part of the Babel compiling process.<br />
<br />
Note that, for Moodle 3.10 and up (see MDLSITE-6130), any new Javascript module must be written on ES6.<br />
<br />
The call from a PHP file takes the same format<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('myplugin/myfile','init');<br />
</syntaxhighlight><br />
And a minimal ES6 file will work with <br />
<syntaxhighlight lang="php"><br />
export const init = () => {<br />
window.console.log('we have been started');<br />
};<br />
</syntaxhighlight><br />
=== Export default ===<br />
There is one slight difference between the ES6 definition for exporting modules and the RequireJS (AMD) definition.<br />
<br />
ES6 allows you to export a “default” value which is actually no different to exporting a named value where the name is “default”. Unfortunately, RequireJS allows for unnamed default exports (e.g. you can do "return SomeClass;") which can be imported by just requiring them in other AMD modules.<br />
<br />
That’s a bit confusing, get to the point! Well, it basically means that in Moodle you won’t be able to write an ES6 module that exports both a default and named exports, e.g. "export default function() {...}" and "export const FOO = 'bar'" in the same module. The export default will simply override all other exports in that module.<br />
=== Inline Javascript ===<br />
Another important note is that ES6 support is only for stand alone Javascript files because it relies on the compilation from Babel and Grunt. That means any inline Javascript (either in PHP or in Mustache templates) won't support the ES6 features. Instead it would be best to keep the inline Javascript as minimal as possible and only use it to load a stand alone Javascript module.<br />
== Minimum (getting started) module for plugins ==<br />
This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...<br />
<syntaxhighlight lang="javascript"><br />
// Put this file in path/to/plugin/amd/src<br />
// You can call it anything you like<br />
<br />
export const init = () => {<br />
document.addEventListener('change', e => {<br />
const someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
};<br />
</syntaxhighlight><br />
For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:<br />
<syntaxhighlight lang="javascript"><br />
define([], function() {<br />
<br />
return {<br />
init: function() {<br />
document.addEventListener('change', function(e) {<br />
var someNode = e.target.closest('.someclass');<br />
if (someNode) {<br />
alert('It changed!');<br />
}<br />
});<br />
}<br />
};<br />
});<br />
</syntaxhighlight><br />
This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,<br />
<syntaxhighlight lang="javascript"><br />
import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.<br />
import * as Str from 'core/str';<br />
import Ajax from 'core/ajax';<br />
<br />
export const init = config => {<br />
};<br />
</syntaxhighlight><br />
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');<br />
</syntaxhighlight><br />
Don't forget to supply the complete '[[Frankenstyle]]' path. The .js is not needed. <br />
<br />
js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...<br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));<br />
</syntaxhighlight><br />
...calls<br />
<syntaxhighlight lang="javascript"><br />
export const init = (first, last) {<br />
window.console.log(`The first name was '${first}' and the last name was '${last}'`);<br />
};<br />
</syntaxhighlight><br />
A more comprehensive explanation follows...<br />
== "Hello World" I am a Javascript Module ==<br />
Lets now create a simple Javascript module so we can see how to lay things out. <br />
<br />
Each Javascript module is contained in a single source file in the <componentdir>/amd/src folder. The final name of the module is taken from the file name and the component name. E.g. block_overview/amd/src/helloworld.js would be a module named "block_overview/helloworld". the name of the module is important when you want to call it from somewhere else in the code. <br />
<br />
After running grunt - the minified Javascript files are stored in the <componentdir>/amd/build folder. The javascript files are renamed to show that they are minified (helloworld.js becomes helloworld.min.js). <br />
<br />
Don't forget to add the built files (the ones in amd/build) to your git commits, or in production no-one will see your changes. <br />
<br />
Lets create a simple module now:<br />
<br />
blocks/overview/amd/src/helloworld.js<br />
<syntaxhighlight lang="javascript"><br />
// Standard license block omitted.<br />
/*<br />
* @module block_overview/helloworld<br />
* @copyright 2015 Someone cool<br />
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later<br />
*/<br />
<br />
import * as Str from 'core/str';<br />
<br />
/**<br />
* Reveal all of the hidden notes.<br />
*/<br />
const showAllNotes = () => {<br />
document.querySelectorAll('.note.hidden').map(note => note.removeClass('hidden'));<br />
};<br />
<br />
/**<br />
* Hide all of the notes.<br />
*/<br />
const hideAllNotes = () => document.querySelectorAll('.note').map(note => note.addClass('hidden'));<br />
<br />
/**<br />
* Return a personalised, formal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const formal = name => Str.get_string('formallygreet', 'block_overview', name);<br />
<br />
/**<br />
* Return a personalised, informal, greeting.<br />
*<br />
* @param {String} name The name of the person to greet<br />
* @returns {Promise}<br />
*/<br />
export const informal = name => {<br />
return Str.get_string('informallygreet', 'block_overview', name);<br />
};<br />
</syntaxhighlight><br />
It's important to note tha tonly functions which are exported will be callable from outside the module. These are part of the public API.<br />
== Loading modules dynamically ==<br />
What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.<br />
<syntaxhighlight lang="javascript"><br />
export const showTheThing = thingToShow => {<br />
// Load the module for this thing.<br />
import(`local_examples/local/types/type_${thingToShow.modname}`)<br />
.then(thingModule => {<br />
window.console.log(`The ${thingToShow.modname} is now available under thingModule within this scope`);<br />
<br />
return thingModule;<br />
});<br />
};<br />
</syntaxhighlight><br />
== Including an external javascript/jquery library ==<br />
If you want to include a javascript / jquery library downloaded from the internet you can do so as follows:<br />
<br />
'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''<br />
e.g. <br />
<syntaxhighlight lang="javascript"><br />
// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE<br />
define("typeahead.js", *[ "jquery" ], function(a0) {<br />
return factory(a0);<br />
});<br />
</syntaxhighlight><br />
will not work, as moodle injects it's own define name when loading the library.<br />
<br />
If the library is in AMD format and has a define:<br />
e.g. i want to include the jquery final countdown timer on my page ( hilios.github.io/jQuery.countdown/ )<br />
* download the module in both normal and minified versions<br />
* place the modules in your moodle install e.g. your custom theme dir, or plugin dir<br />
* /theme/mytheme/amd/src/jquery.countdown.js<br />
you can now include the module and initialise it (there are multiple ways to do this)<br />
php:<br />
<br />
1. Create your own AMD module and initialise it:<br />
<br />
In your PHP file:<br />
<syntaxhighlight lang="php"><br />
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);<br />
</syntaxhighlight><br />
Javascript module:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/amd/src/countdowntimer.js<br />
import Countdown from 'theme_mytheme/jquery.countdown');<br />
import $ from 'jquery';<br />
<br />
export const init = params => {<br />
$('#clock').countdown(params.targetItem, event => {<br />
$(event.target).html(event.strftime('%D days %H:%M:%S'));<br />
});<br />
};<br />
</syntaxhighlight><br />
2. Call your Javascript module from your template:<br />
<syntaxhighlight lang="javascript"><br />
// /theme/mytheme/templates/countdowntimer.mustache<br />
<span id="theme_mytheme-clock-{{uniqid}}"></span><br />
{{#js}}<br />
require(['theme_mytheme/countdowntimer'], function(myModule) {<br />
myModule.init({<br />
targetItem: 'theme_mytheme-clock-{{uniqid}}'<br />
});<br />
});<br />
{{/js}}<br />
</syntaxhighlight><br />
Note: If you feel that you need to work around MDL-62468, then you should probably be putting the data into the DOM in your template via data Attributes, or loading it via a Web Service.<br />
<br />
Another example of adding a 3rd-party library to a Moodle plugin (by Ruslan Kabalin)<br />
<br />
If you want use https://github.com/R-TEK/colr_pickr in your plugin but this module isn't RequireJS-compatible.<br />
<br />
You need to configure requirejs in your plugin to use third-party library:<br />
<syntaxhighlight lang="php"><br />
$config = ['paths' => ['colorpicker' => 'CDN or local path...']];<br />
$requirejs = 'require.config(' . json_encode($config) . ')';<br />
$PAGE->requires->js_amd_inline($requirejs);<br />
</syntaxhighlight><br />
Then in your JS module in the plugin:<br />
<syntaxhighlight lang="javascript"><br />
define([colorpicker], function(ColorPicker) {<br />
const button = document.getElementById('my_picker');<br />
let picker = new ColorPicker(button, '#ff0000');<br />
}<br />
</syntaxhighlight><br />
And another example of using https://github.com/itsjavi/bootstrap-colorpicker (that has a [[jQuery]] dependency) with native ES6 JS:<br />
NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.<br />
<br><br />
<syntaxhighlight lang="javascript"><br />
import ColourPicker from 'local_myplugin/bootstrap-colorpicker';<br />
<br />
const myElement = document.querySelector('.myelement');<br />
const picker = new ColourPicker(myElement);<br />
</syntaxhighlight><br />
== Embedding AMD code in a page ==<br />
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters. <br />
<syntaxhighlight lang="php"><br />
$PAGE->requires->js_call_amd($modulename, $functionname, $params);<br />
</syntaxhighlight><br />
that will "do the right thing" with your block of AMD code and execute it at the end of the page, after our AMD module loader has loaded.<br />
Notes:<br />
* the $modulename is the 'componentname/modulename' discussed above<br />
* the $functionname is the name of a public function exposed by the amd module. <br />
* the $params is an array of params passed as arguments to the function. These should be simple types that can be handled by json_encode (no recursive arrays, or complex classes please). <br />
* if the size of the params array is too large (> 1Kb), this will produce a developer warning. Do not attempt to pass large amounts of data through this function, it will pollute the page size. A preferred approach is to pass css selectors for DOM elements that contain data-attributes for any required data, or fetch data via ajax in the background.<br />
AMD / JS code can also be embedded on a page via mustache templates<br />
see here: https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F<br />
== Troubleshooting ==<br />
=== npm-shrinkwrap.json sha1 / sha512 changes ===<br />
If grunt changes all the hashes in npm-shrinkwrap.json then try this:<br />
rm -rf node_modules && npm i<br />
== But I have a mega JS file I don't want loaded on every page? ==<br />
Loading all JS files at once and stuffing them in the browser cache is the right choice for MOST js files, there are probably some exceptions. For these files, you can rename the javascript file to end with the suffix "-lazy.js" which indicates that the module will not be loaded by default, it will be requested the first time it is used. There is no difference in usage for lazy loaded modules, the require() call looks exactly the same, it's just that the module name will also have the "-lazy" suffix.<br />
== Useful links ==<br />
* [https://assets.moodlemoot.org/sites/15/20171004085436/JavaScript-AMD-with-RequireJS-presented-by-Daniel-Roperto-Catalyst.pdf JavaScript AMD with RequireJS] presented by Daniel Roperto, Catalyst. (MoodleMOOT AU 2017)<br />
* [[Useful_core_Javascript_modules]]<br />
*[[Guide_to_adding_third_party_jQuery_for_AMD]] by Patrick Thibaudeau<br />
*[https://moodle.org/mod/forum/discuss.php?d=378112#p1524459 How to get variables from PHP into javascript AMD modules in M3.5] Justin Hunt, on Moodle forums.<br />
*MDL-67327 JavaScript issues when not following the official documentation, since Moodle 3.8<br />
*[https://moodle.org/mod/forum/discuss.php?d=405829 Error from grunt watch - Moodle 3.9] Forum Discussion<br />
[[Category:AJAX]]<br />
[[Category:Javascript]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Developer_meeting_October_2021&diff=61616Developer meeting October 20212022-01-13T14:40:03Z<p>Tim+Hunt: </p>
<hr />
<div>[[Developer meetings]] > October 2021 meeting <br />
{| class="wikitable"<br />
|-<br />
| Date<br />
| Tuesday 12 October 2021 at 07:00 UTC<br />
|-<br />
| Meeting recording<br />
| [https://moodle.org/mod/bigbluebuttonbn/view.php?id=8596 Developer meetings BBB on moodle.org]<br />
|-<br />
| Discussion<br />
| [https://moodle.org/mod/forum/discuss.php?d=426502 Developer meeting Tuesday 12 October 2021]<br />
|}<br />
== Agenda ==<br />
# Latest #moodledev news - [https://moodle.org/user/view.php?id=2356736&course=5 Sander Bangma], Moodle HQ - [[:File:Community Dev Meeting - LMS Update - Oct 2021.pdf|slides PDF]] - ''starts at the biginning of the recording''<br />
# Question bank improvements in Moodle 4.0 - [https://moodle.org/user/view.php?id=1914213&course=5 Matt Porritt], Catalyst AU - [[:File:qbank preso 20211012.pdf|slides PDF]] - ''starts at about 32:00 in the recording. Demo of new features from 34:00 to 41:30.''<br />
----<br />
If there is any topic that you would like to present or discuss at a developer meeting, please contact [https://moodle.org/user/profile.php?id=1601 David Mudrák].</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Developer_meeting_October_2021&diff=61615Developer meeting October 20212022-01-13T14:28:56Z<p>Tim+Hunt: Add time info</p>
<hr />
<div>[[Developer meetings]] > October 2021 meeting <br />
{| class="wikitable"<br />
|-<br />
| Date<br />
| Tuesday 12 October 2021 at 07:00 UTC<br />
|-<br />
| Meeting recording<br />
| [https://moodle.org/mod/bigbluebuttonbn/view.php?id=8596 Developer meetings BBB on moodle.org]<br />
|-<br />
| Discussion<br />
| [https://moodle.org/mod/forum/discuss.php?d=426502 Developer meeting Tuesday 12 October 2021]<br />
|}<br />
== Agenda ==<br />
# Latest #moodledev news - [https://moodle.org/user/view.php?id=2356736&course=5 Sander Bangma], Moodle HQ - [[:File:Community Dev Meeting - LMS Update - Oct 2021.pdf|slides PDF]] - ''starts at the biginning of the recording''<br />
# Question bank improvements in Moodle 4.0 - [https://moodle.org/user/view.php?id=1914213&course=5 Matt Porritt], Catalyst AU - [[:File:qbank preso 20211012.pdf|slides PDF]] - ''starts at about 32:00 in the recording''<br />
----<br />
If there is any topic that you would like to present or discuss at a developer meeting, please contact [https://moodle.org/user/profile.php?id=1601 David Mudrák].</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Tracker_issue_labels&diff=61433Tracker issue labels2021-10-12T08:14:14Z<p>Tim+Hunt: </p>
<hr />
<div>The Moodle Tracker allows issues to be "labelled" with tags. This page lists common labels that we use to flag aspects about our MDL issues (bugs and feature requests about Moodle itself).<br />
<br />
Note: Labels can only be added by a user with permission to edit an issue i.e. the issue reporter, members of the developers group, or members of certain other groups.<br />
==Labels==<br />
;triaged:This is set after a bug has been [[Bug triage|triaged]] by component lead or HQ developer. It indicates that the issue has been confirmed, with basic fields like "Priority" checked, and is now ready for a developer to look at.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20in%20(triaging_in_progress) triaging_in_progress]: Used to flag issues that are being triaged (sometimes an ongoing process for days or weeks). When the issue has been triaged the ''triaging_in_progress'' label should be removed and a ''triaged'' label should be added or when the issue is closed.<br />
;mdlqa:Used to flag that an issue is a direct result of a Moodle QA test, conducted just before major releases. The bug should also be LINKED to the original MDLQA test, so that developers/integrators can reset the original MDLQA test (for re-testing) when the MDL issue is fixed. Once all the related MDLQA tests are passing the label can be deleted.<br />
;mdlqa_conversion: Used to flag MDL issues that are converting MDLQA issues to behat features. The bug should also be LINKED to the MDLQA test being converted. Useful to know what's going and exclude some issues from manual QA. Once the MDL issue has been closed and the MDLQA has been moved to MDLQA-5249 the label can be deleted.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20unit_test_required unit_test_required]: Used to flag issues that should have their own unit tests.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20acceptance_test_required acceptance_test_required]: Used to flag issues that should be regularly tested using the behat framework (https://docs.moodle.org/dev/Acceptance_testing). Before a major release these issues will be reviewed and new feature files will be added.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20qa_test_required qa_test_required]:Used to flag issues that cannot be covered by automated tests. When adding the label, please also add a comment advising exactly what needs covering in the QA test e.g. steps 6-10 in testing instructions.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20qa_identified qa_identified]: Used to flag issues identified in QA testing which we were not able to fix before the release. Hopefully such issues can be worked on shortly after release, removing the label once the issue is fixed.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20docs_required docs_required]: Used to flag issues that have created a need for documentation work, such as new pages, changes, or even being added to upcoming release notes. Docs people will look for these issues periodically when working on documentation, removing the label once documentation has been written. For new features in the upcoming version of Moodle, please add documentation to the dev docs (adding a link to it from the tracker issue) or in a comment in the issue, then when the new version wiki is set up (3 weeks prior to release), the info can be transferred.<br />
;dev_docs_required ([https://tracker.moodle.org/issues/?jql=labels%20in%20(dev_docs_required) all] | [https://tracker.moodle.org/issues/?jql=labels%20in%20(dev_docs_required)%20AND%20assignee%20%3D%20currentUser() yours]): Used to flag issues that need to be noted in the dev docs. The responsibility of creating/updating Dev docs falls to the developer assigned to each relevant issue. When the issue is resolved, documentation should be created/updated, an appropriate URL should be added to the ''Documentation link'' field of the issue and the ''dev_docs_required'' label should be removed from the issue.<br />
;integration_held: Used to flag issues already sent to integration that, for any cause, have been postponed to next cycles. Used only by integrators when there is some dependency or time-period causing one issue not being immediately integrable. Must be cleaned when the held is over.<br />
;unhold_requested:Used to ask for an issue (having the ''integration_held '' label) to become unblocked, this flag must be coupled with a reasoned comment. Anybody can use it as far as repeated requests are avoided. Development managers will decide ASAP about giving the issue an integration opportunity or keeping it held. See [[Integration_Review#During_continuous_integration.2FFreeze.2FQA_period]].<br />
;security_held: Used to flag security issues that have been reviewed by integrators already but held from integration repository. These issues must be cleared during point releases.<br />
;security_benefit: Used to flag issues which help to improve the security of Moodle, but are not directly exploitable security bugs (and therefore do not have a security level assigned). For example, MDL-66775 and MDL-65443.<br />
;partner:Moodle Partners apply this label to flag issues that are important to their clients. The Moodle HQ dev team takes this label into consideration when setting roadmap and bug fixing priorities.<br />
;patch: This label indicates that a solution (patch) has been attached to the issue. However, if you can, it may be better to submit the issue for peer review, rather than using this label. This is useful to component leads and Moodle HQ when deciding what to work on next.<br />
;cime: A developer can add the label 'cime' to an issue to request that CiBot perform an [[Automated code review]].<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20performance%20AND%20project%20%3D%20MDL performance]: Used to flag any issues that developers think may affect Moodle's performance in some way (positively or negatively)<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20ui_change ui_change]: Used to identify issues that affect the interface presented to users. This label will usually be added together with the ''docs_required label'', but the ''ui_change'' will remain permanently with the issue, while the ''docs_required'' label is removed after docs are created. This label is searched for during the preparation of release notes.<br />
;api_change: Used to identify API changes. This label will usually be added together with the ''dev_docs_required label'', but the ''api_change'' will remain permanently with the issue, while the ''dev_docs_required'' label is removed after docs are created. This label is searched for during the preparation of release notes.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20release_notes release_notes]: Used to identify all issues to be listed in the release notes (minor or major).<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20upgrade_notes upgrade_notes]: Issues that need to be mentioned in the user documentation [[:en:Upgrading|Upgrading]] under 'Possible issues that may affect you in Moodle 3.x' (major versions).<br />
;lost_functionality: Used to identify issues describing functionality which was available in an earlier version but which is no longer available in the latest version.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20%20test_server_required test_server_required]: Used to identify QA tests which can't be tested on the [http://qa.moodle.net QA testing site] such as upgrade testing.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20credentials_required credentials_required]: Used to identify QA tests which require the tester to enter credentials such as a client ID and secret for configuring OAuth 2.<br />
;new: Used to identify new tests in the current QA cycle for volunteers from the community to use as a basis for exploratory testing.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20addon_candidate addon_candidate]: Used to identify suggestions for improvements/new features as possible candidates for add-on development. New and willing developers can be directed to these issues for projects.<br />
;affects_mobileapp: Used to identify MDL issues that may affect the mobile app. It should be used when adding new features to functionalities supported by the app or when doing changes in existing ones. Examples are: MDL-372 and MDL-38158<br />
;affects_moodlecloud: Used to identify MDL issues that may affect Moodlecloud<br />
;affects_workplace: Used to identify MDL issues that may affect Moodle Workplace<br />
;needs_user_stories: Used to identify issues that require further clarification of the requirements through adding user stories.<br />
;[https://tracker.moodle.org/issues/?filter=21824 ready_for_integration]: Used to identify issues that already have been peer-reviewed but the user lacks permissions (pull-requester) to send the issue to integration. Any pull-requester can, on peer-reviewer's behalf, proceed with the transition. The label is removed once the issue has been transitioned.<br />
==See also==<br />
*[[Tracker]]<br />
* [[Bug triage]]<br />
[[Category:Tracker]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Tracker_issue_labels&diff=61432Tracker issue labels2021-10-12T08:13:26Z<p>Tim+Hunt: Add link to unhold_requested info</p>
<hr />
<div>The Moodle Tracker allows issues to be "labelled" with tags. This page lists common labels that we use to flag aspects about our MDL issues (bugs and feature requests about Moodle itself).<br />
<br />
Note: Labels can only be added by a user with permission to edit an issue i.e. the issue reporter, members of the developers group, or members of certain other groups.<br />
==Labels==<br />
;triaged:This is set after a bug has been [[Bug triage|triaged]] by component lead or HQ developer. It indicates that the issue has been confirmed, with basic fields like "Priority" checked, and is now ready for a developer to look at.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20in%20(triaging_in_progress) triaging_in_progress]: Used to flag issues that are being triaged (sometimes an ongoing process for days or weeks). When the issue has been triaged the ''triaging_in_progress'' label should be removed and a ''triaged'' label should be added or when the issue is closed.<br />
;mdlqa:Used to flag that an issue is a direct result of a Moodle QA test, conducted just before major releases. The bug should also be LINKED to the original MDLQA test, so that developers/integrators can reset the original MDLQA test (for re-testing) when the MDL issue is fixed. Once all the related MDLQA tests are passing the label can be deleted.<br />
;mdlqa_conversion: Used to flag MDL issues that are converting MDLQA issues to behat features. The bug should also be LINKED to the MDLQA test being converted. Useful to know what's going and exclude some issues from manual QA. Once the MDL issue has been closed and the MDLQA has been moved to MDLQA-5249 the label can be deleted.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20unit_test_required unit_test_required]: Used to flag issues that should have their own unit tests.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20acceptance_test_required acceptance_test_required]: Used to flag issues that should be regularly tested using the behat framework (https://docs.moodle.org/dev/Acceptance_testing). Before a major release these issues will be reviewed and new feature files will be added.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20qa_test_required qa_test_required]:Used to flag issues that cannot be covered by automated tests. When adding the label, please also add a comment advising exactly what needs covering in the QA test e.g. steps 6-10 in testing instructions.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20qa_identified qa_identified]: Used to flag issues identified in QA testing which we were not able to fix before the release. Hopefully such issues can be worked on shortly after release, removing the label once the issue is fixed.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20docs_required docs_required]: Used to flag issues that have created a need for documentation work, such as new pages, changes, or even being added to upcoming release notes. Docs people will look for these issues periodically when working on documentation, removing the label once documentation has been written. For new features in the upcoming version of Moodle, please add documentation to the dev docs (adding a link to it from the tracker issue) or in a comment in the issue, then when the new version wiki is set up (3 weeks prior to release), the info can be transferred.<br />
;dev_docs_required ([https://tracker.moodle.org/issues/?jql=labels%20in%20(dev_docs_required) all] | [https://tracker.moodle.org/issues/?jql=labels%20in%20(dev_docs_required)%20AND%20assignee%20%3D%20currentUser() yours]): Used to flag issues that need to be noted in the dev docs. The responsibility of creating/updating Dev docs falls to the developer assigned to each relevant issue. When the issue is resolved, documentation should be created/updated, an appropriate URL should be added to the ''Documentation link'' field of the issue and the ''dev_docs_required'' label should be removed from the issue.<br />
;integration_held: Used to flag issues already sent to integration that, for any cause, have been postponed to next cycles. Used only by integrators when there is some dependency or time-period causing one issue not being immediately integrable. Must be cleaned when the held is over.<br />
;unhold_requested:Used to ask for an issue (having the ''integration_held '' label) to become unblocked, this flag must be coupled with a reasoned comment. Anybody can use it as far as repeated requests are avoided. Development managers will decide ASAP about giving the issue an integration opportunity or keeping it held. See <nowiki>[[Integration_Review#During_continuous_integration.2FFreeze.2FQA_period]]</nowiki>.<br />
;security_held: Used to flag security issues that have been reviewed by integrators already but held from integration repository. These issues must be cleared during point releases.<br />
;security_benefit: Used to flag issues which help to improve the security of Moodle, but are not directly exploitable security bugs (and therefore do not have a security level assigned). For example, MDL-66775 and MDL-65443.<br />
;partner:Moodle Partners apply this label to flag issues that are important to their clients. The Moodle HQ dev team takes this label into consideration when setting roadmap and bug fixing priorities.<br />
;patch: This label indicates that a solution (patch) has been attached to the issue. However, if you can, it may be better to submit the issue for peer review, rather than using this label. This is useful to component leads and Moodle HQ when deciding what to work on next.<br />
;cime: A developer can add the label 'cime' to an issue to request that CiBot perform an [[Automated code review]].<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20performance%20AND%20project%20%3D%20MDL performance]: Used to flag any issues that developers think may affect Moodle's performance in some way (positively or negatively)<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20ui_change ui_change]: Used to identify issues that affect the interface presented to users. This label will usually be added together with the ''docs_required label'', but the ''ui_change'' will remain permanently with the issue, while the ''docs_required'' label is removed after docs are created. This label is searched for during the preparation of release notes.<br />
;api_change: Used to identify API changes. This label will usually be added together with the ''dev_docs_required label'', but the ''api_change'' will remain permanently with the issue, while the ''dev_docs_required'' label is removed after docs are created. This label is searched for during the preparation of release notes.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20release_notes release_notes]: Used to identify all issues to be listed in the release notes (minor or major).<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20upgrade_notes upgrade_notes]: Issues that need to be mentioned in the user documentation [[:en:Upgrading|Upgrading]] under 'Possible issues that may affect you in Moodle 3.x' (major versions).<br />
;lost_functionality: Used to identify issues describing functionality which was available in an earlier version but which is no longer available in the latest version.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20%20test_server_required test_server_required]: Used to identify QA tests which can't be tested on the [http://qa.moodle.net QA testing site] such as upgrade testing.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20credentials_required credentials_required]: Used to identify QA tests which require the tester to enter credentials such as a client ID and secret for configuring OAuth 2.<br />
;new: Used to identify new tests in the current QA cycle for volunteers from the community to use as a basis for exploratory testing.<br />
;[https://tracker.moodle.org/issues/?jql=labels%20%3D%20addon_candidate addon_candidate]: Used to identify suggestions for improvements/new features as possible candidates for add-on development. New and willing developers can be directed to these issues for projects.<br />
;affects_mobileapp: Used to identify MDL issues that may affect the mobile app. It should be used when adding new features to functionalities supported by the app or when doing changes in existing ones. Examples are: MDL-372 and MDL-38158<br />
;affects_moodlecloud: Used to identify MDL issues that may affect Moodlecloud<br />
;affects_workplace: Used to identify MDL issues that may affect Moodle Workplace<br />
;needs_user_stories: Used to identify issues that require further clarification of the requirements through adding user stories.<br />
;[https://tracker.moodle.org/issues/?filter=21824 ready_for_integration]: Used to identify issues that already have been peer-reviewed but the user lacks permissions (pull-requester) to send the issue to integration. Any pull-requester can, on peer-reviewer's behalf, proceed with the transition. The label is removed once the issue has been transitioned.<br />
==See also==<br />
*[[Tracker]]<br />
* [[Bug triage]]<br />
[[Category:Tracker]]</div>Tim+Hunthttps://docs.moodle.org/dev/index.php?title=Moodle_3.11_release_notes&diff=60545Moodle 3.11 release notes2021-08-06T13:35:49Z<p>Tim+Hunt: Make it easier to find the PHPunit upgrade notes.</p>
<hr />
<div>[[Releases]] > {{FULLPAGENAME}}<br />
<br />
<br />
Release date: 17 May 2021<br />
<br />
<br />
Here is [https://tracker.moodle.org/secure/IssueNavigator!executeAdvanced.jspa?jqlQuery=project+%3D+mdl+AND+resolution+%3D+fixed+AND+fixVersion+in+%28%223.11%22%29+ORDER+BY+priority+DESC&runQuery=true&clear=true the full list of fixed issues in 3.11].<br />
<br />
See our [https://docs.moodle.org/311/en/New_features New features page] in the user documentation for an introduction to Moodle 3.11 with screenshots.<br />
<br />
If you are upgrading from a previous version, please see [[:en:Upgrading|Upgrading]] in the user docs.<br />
==Server requirements==<br />
These are just the minimum supported versions. We recommend keeping all of your software and operating systems up-to-date.<br />
* Moodle upgrade: Moodle 3.6 or later<br />
* PHP version: minimum PHP 7.3.0 ''Note: minimum PHP version has increased since Moodle 3.10''. PHP 7.4.x is supported too. [[Moodle and PHP|PHP 8.0 support]] is being implemented (see MDL-70745) and '''not ready for production''' yet.<br />
* PHP extension '''sodium''' is recommended. It will be required in Moodle 4.2. For further details, see [https://docs.moodle.org/311/en/Environment_-_PHP_extension_sodium Environment - PHP extension sodium].<br />
* PHP setting '''max_input_vars''' is recommended to be >= 5000 for PHP 7.x installations. It's a requirement for PHP 8.x installations. For further details, see [https://docs.moodle.org/311/en/Environment_-_max_input_vars Environment - max input vars].<br />
=== Database requirements ===<br />
Moodle supports the following database servers. Again, version numbers are just the minimum supported version. We recommend running the latest stable version of any software.<br />
{| class="wikitable"<br />
|-<br />
! Database<br />
! Minimum version<br />
! Recommended<br />
|-<br />
| [http://www.postgresql.org/ PostgreSQL]<br />
| 9.6 <br />
| Latest<br />
|-<br />
| [http://www.mysql.com/ MySQL]<br />
| 5.7 <br />
| Latest<br />
|-<br />
| [https://mariadb.org/ MariaDB]<br />
| 10.2.29 <br />
| Latest<br />
|-<br />
| [http://www.microsoft.com/en-us/server-cloud/products/sql-server/ Microsoft SQL Server]<br />
| 2017 (increased since Moodle 3.10)<br />
| Latest<br />
|-<br />
| [http://www.oracle.com/us/products/database/overview/index.html Oracle Database]<br />
| 11.2<br />
| Latest<br />
|}<br />
==Client requirements==<br />
=== Browser support ===<br />
Moodle is compatible with any standards compliant web browser. We regularly test Moodle with the following browsers:<br />
<br />
Desktop:<br />
* Chrome<br />
* Firefox<br />
* Safari<br />
* Edge<br />
''Note: Moodle 3.10 and above do NOT support Internet Explorer 11.''<br />
<br />
Safari 7 and below has known compatibility issues with Moodle 3.10 and above.<br />
<br />
Mobile:<br />
* MobileSafari<br />
* Google Chrome<br />
For the best experience and optimum security, we recommend that you keep your browser up to date. https://www.whatsmybrowser.org/<br />
==Warnings==<br />
* If you have a site running on MariaDB / MySQL with many users, you may experience database issues after the upgrade step 2021042100. The upgrade attempts to drop several columns from the user table ("icq", "skype" and others) once they were converted to new user profile fields (MDL-28452). These ALTER TABLE queries typically require copying all the rows into a new tablespace and rebuilding all indexes. Which may eventually lead to time-outs and ''"MySQL server has gone away"'' errors. It should be enough and safe to simply wait for the query to finish on the DB server (you may need to monitor currently running queries there) and then re-run the upgrade until the upgrade step 2021042100.01 finishes successfully.<br />
==Major features==<br />
===Improve student activity completion===<br />
* MDL-71189 - Define sort ordering for completion conditions<br />
* MDL-70821 - Update the course homepage to display the activity information<br />
* MDL-70818 - Implement the activity dates functionality for each activity and output them in view.php<br />
* MDL-70815 - Create a base class for fetching a user's activity completion details<br />
* MDL-70816 - Create a base class for fetching an activity's dates that are relevant for a given user<br />
* MDL-70820 - Implement the completion details functionality for each activity plugins output them in view.php - Part 1<br />
* MDL-70935 - Implement the completion details functionality for each activity plugins output them in view.php - Part 2<br />
* MDL-71235 - Review and update existing web services to return the new fields and exported information from activities<br />
* MDL-71288 - Activity completion fallback for third party plugins<br />
* MDL-71163 - Remove duplicate activity dates<br />
* MDL-71144 - Deprecate the *_get_completion_state() callbacks<br />
* MDL-71234 - Create user tours for the activity information output component<br />
===Brickfield accessibility toolkit===<br />
* MDL-69863 - Brickfield Education Labs accessibility toolkit core integration<br />
===Badges===<br />
* MDL-71117 - Make Moodle OBv2.1 implementation compliant <br />
* MDL-70689 - Add new "IMS OBv2.1" OAuth 2 service<br />
* MDL-70911 - Remove "Backpack settings" site administration page and improve UI<br />
* MDL-63961 - Improve resolution of badge image sent to external backpacks and used when duplicating badges<br />
===Content bank and H5P===<br />
* MDL-69331 - Add ability to disable specified H5P content types<br />
* MDL-66769 - Create a task to clean up unused H5P content<br />
* MDL-70429 - Allow admins to set the default returntype in repository_contentbank<br />
* MDL-67999 - Update content bank upload button to open file picker in a popup instead of new page<br />
* MDL-69762 - Option to make a content bank item unlisted<br />
* MDL-70408 - Open H5P file from H5P activity when it was added as a reference<br />
* MDL-70438 - Content bank should provide info on the number of places where content is used and warn you when deleting<br />
===Assignment===<br />
* MDL-52420 - Assignment comments should be also saved when clicking 'save changes' in the assignment grader page<br />
* MDL-68533 - Allow mod_assign download all assignments to be streamed<br />
* MDL-67702 - Assignment name filter preference should only affect current assignment's view<br />
* MDL-70038 - Implement Poppler pdftoppm compatibility for faster assignment submission PDF to PNG conversion<br />
* MDL-69631 - Add 'Draft' filter to assignment grading table<br />
===Quiz and questions===<br />
* MDL-32226 - Add Plagiarism support to essay questions<br />
* MDL-70895 - Questions: Default options when creating a question<br />
* MDL-71262 - Add default options for essay question type<br />
* MDL-71225 - Add default options for ddimageortext, ddmarker and match question types<br />
* MDL-71181 - Display pass grade on quiz front page<br />
* MDL-68597 - Add optional min/max word count limits to Essay question type<br />
* MDL-69735 - Read-only view of quiz settings overrides<br />
* MDL-70134 - Improve manual grading of quiz essay answers - web page format<br />
* MDL-66600 - Manual grading of automatically graded questions: show computer grading<br />
* MDL-71205 - Add default options for numerical question type using user-preferences<br />
* MDL-70562 - In a newly created quiz, prevent "Edit quiz" and "Back to the course" buttons sticking together<br />
* MDL-70266 - Quiz override screens should show user identity fields<br />
* MDL-71030 - Quiz review: name the person who made each change in the question response history (if not the student)<br />
===Accessibility improvements===<br />
* MDL-69474 - Improve accessibility of profile images<br />
* MDL-71089 - Make it possible to style toast notifications<br />
===Usability improvements===<br />
* MDL-70817 - Create an output component that displays an activity's information for a user<br />
* MDL-48594 - More filtering options on Activity Completion Report<br />
* MDL-65856 - UX Review of session expired timeout modal<br />
* MDL-65135 - Add year to messaging conversation date headings, if not the current year<br />
* MDL-51287 - Show confirmation when profile changes are saved<br />
* MDL-70565 - Add ability to search country field on Participants page<br />
* MDL-69145 - Default the participants page filtering to "ALL"<br />
* MDL-57831 - Improve notification preferences on/off buttons so they fit better with non-English strings<br />
* MDL-71254 - OAuth2: Display login errors on the login page<br />
* MDL-67028 - LTI: Support Course dates substitution parameters<br />
* MDL-70753 - Create landing page for the reports link in the secondary navigation<br />
* MDL-71403 - Update message preferences of a user as admin to use consistent toggle icons<br />
* MDL-71064 - Add support for keyboard hotkeys in VideoJS<br />
* MDL-69878 - Always show the close button on the message drawer<br />
==Other highlights==<br />
===Functional changes===<br />
* MDL-28452 - Convert user profile fields for messaging/networking into custom profile fields<br />
* MDL-58673 - Enable playbackrates for videojs<br />
* MDL-45242 - Allow user profile fields to be specified as user identity fields - New code is backwards-compatible, but report code should be updated.<br />
* MDL-66431 - Remove "Enable activity chooser" user preference<br />
* MDL-61768 - Update Google Drive repository to allow Shared drive files<br />
* MDL-63381 - Option to not include permissions overrides when importing or restoring a backup<br />
* MDL-71190 - Backup and Restore lastaccess to course<br />
* MDL-48269 - Remove option to hide a group picture<br />
* MDL-71118 - Differentiate between grade as a noun and grade as a verb in the UI texts<br />
* MDL-71186 - Add custom user field support to group management screens<br />
* MDL-69773 - Add an option to display section names in Section link block<br />
===For administrators===<br />
* MDL-70722 - Move Microsoft, Facebook and NextCloud OAuth2 services to new, reorganised architecture<br />
* MDL-42382 - Add a "Replace filter" option on the admin browse users page<br />
* MDL-65843 - Ability to force cron scheduled task definitions in config.php (schedule and disabled)<br />
* MDL-70536 - Create a CLI script to reset user dashboards<br />
* MDL-67748 - Improve the web services tokens management to allow searching and filtering <br />
* MDL-69460 - Check for removed files before CLI upgrade<br />
* MDL-70828 - Add ability to switch off session lock debugging<br />
* MDL-70583 - Implement a renderer for progress_bar in cli output<br />
* MDL-68010 - Allow disabled tasks to be run from the GUI<br />
* MDL-71017 - Add the ability to configure OAuth2 services for login only; add login display name<br />
* MDL-70269 - Update the ClamAV default behaviour when an error occurs<br />
* MDL-70500 - Use Dynamic Registration to allow Tools to update to LTI Advantage<br />
* MDL-70287 - Payment service consumers should be able to specify url after payment<br />
* MDL-70158 - Make it easier to find a specific component in template library<br />
* MDL-70632 - Allow searching of available language packs<br />
* MDL-70362 - Add showdebugging and showsql options to admin/cli/uninstall_plugins.php<br />
* MDL-69898 - Config change event should link to config change report<br />
* MDL-70159 - Sort capabilities in capability overview tool<br />
===Mobile===<br />
* MDL-71273 - Add a new option in Moodle app "Disabled features" for preventing the new LTI launch in the app<br />
* MDL-65983 - Include option for testing Push notifications in a site<br />
===Performance===<br />
* MDL-68481 - mod/folder/download_folder.php should be a streaming zip download<br />
* MDL-70444 - Make my_reset_page_for_all_users for dashboards more robust<br />
* MDL-68052 - Implement cleanup of analytics_indicator_calc stores table<br />
* MDL-71044 - Extend the 'backup_cleanup_task' scheduled task to remove old files<br />
* MDL-66667 - Cache course image in the course_summary_exporter<br />
* MDL-69121 - Allow redis session store to use zip or zStd for compression like redis MUC<br />
* MDL-70107 - Running a scheduled task in the GUI should unlock the session<br />
* MDL-27193 - Eliminate DB queries in mod/glossary/settings.php <br />
* MDL-70608 - Update language pack installs / updates to run asynchronously to avoid timeouts when multiple are used<br />
==Security improvements==<br />
* MDL-65818 - Provide admin setting type for secure data (passwords/tokens)<br />
* MDL-64865 - Add logging when auth config is automatically changed due to config/filesystem mismatch<br />
* MDL-69333 - Reduce ability to fingerprint a server with a htaccess-dist / nginx file / docs<br />
* MDL-69522 - Allow antivirus scanners to specify the message to the user<br />
* MDL-67882 - Log changes to the message notifications settings<br />
* MDL-70649 - Allow plugins to augment the cURL security helper via callback<br />
* MDL-70735 - Reduce information disclosure from TCPDF version<br />
* MDL-70766 - Log changes to auth plugin settings in config log<br />
* MDL-70439 - Display user email address visibility settings on their own profile<br />
==For developers==<br />
The PHPUnit upgrade will almost certainly break your tests. See [[Writing PHPUnit tests#Upgrading unit tests to work with Moodle 3.11 and up .28PHPUnit 9.5.29]]<br />
* MDL-52817 - New sql_group_concat db method<br />
* MDL-64554 - Add module for displaying moodleform in a modal window<br />
* MDL-71036 - Upgrade PHPUnit to 9.5.x<br />
* MDL-68608 - Improve the readonly session debugging message<br />
* MDL-71012 - HTTP 503 Service Not Available is returned by exceptions and should be 500 instead<br />
* MDL-70311 - Upgrade boost to use Bootstrap latest version<br />
* MDL-69202 - Restore backup: add getter method for oldmoduleid<br />
* MDL-70055 - Support large number of SQL-IN parameters in Postgres<br />
* MDL-70142 - Preserve form data when purging individual caches<br />
* MDL-71099 - Move user_fields from core to core_user<br />
===Web service additions and updates===<br />
* MDL-69869 - Add ability for "get enrolled users" web service to be filtered by suspended users<br />
* MDL-70128 - Create a new endpoint (script) to retrieve draft files from web services<br />
* MDL-68853 - Create web service to trigger report_viewed event for H5P activities<br />
* MDL-69259 - Create H5P activity web service to get the list of students that attempted an activity<br />
* MDL-70387 - New web service core_files_get_unused_draft_itemid<br />
* MDL-71492 - Return quiz pass grade via web services<br />
* MDL-70037 - Update mod_forum_get_discussion_posts web service to return the last_modified attribute<br />
* MDL-71031 - Batch create API for grade categories<br />
* MDL-71169 - All new external functions implementation classes should use <tt>execute</tt> as the method name, in which case the <tt>methodname</tt> property should not be specified in db/services.php file<br />
===Deprecations===<br />
* MDL-69792 - Deprecate unused backpack js functions<br />
* MDL-66138 - Deprecate get_forum_discussions_paginated webservice<br />
* MDL-65319 - Phase 2 of deprecation of functions in lib/deprecatedlib.php initially deprecated in 3.7<br />
* MDL-65284 - Final deprecation for analytics methods deprecated in MDL-64783<br />
* MDL-65215 - Final deprecation of i_dock_block()<br />
* MDL-65186 - Final deprecation of \core_analytics\manager::add_builtin_models()<br />
* MDL-65086 - get_enabled_time_splitting_methods final deprecation<br />
* MDL-64982 - Final deprecation of behat_base::TIMEOUT and related constants<br />
* MDL-64866 - Remove message/defaultoutputs.php and final deprecation of admin_page_manageqbehaviours class<br />
* MDL-64776 - Final deprecation of booktool_print_get_toc()<br />
* MDL-63266 - Final deprecation of enrol/database/cli/sync.php<br />
===Component API updates===<br />
* admin/upgrade.txt<br />
* analytics/upgrade.txt<br />
* auth/shibboleth/upgrade.txt<br />
* backup/upgrade.txt<br />
* badges/upgrade.txt<br />
* blocks/section_links/upgrade.txt<br />
* blocks/tag_youtube/upgrade.txt<br />
* completion/upgrade.txt<br />
* contentbank/upgrade.txt<br />
* course/upgrade.txt<br />
* customfield/upgrade.txt<br />
* enrol/database/upgrade.txt<br />
* enrol/upgrade.txt<br />
* group/upgrade.txt<br />
* h5p/upgrade.txt<br />
* lib/upgrade.txt<br />
* mod/book/upgrade.txt<br />
* mod/feedback/upgrade.txt<br />
* mod/forum/upgrade.txt<br />
* mod/h5pactivity/upgrade.txt<br />
* mod/quiz/upgrade.txt<br />
* payment/upgrade.txt<br />
* plagiarism/upgrade.txt<br />
* question/type/upgrade.txt<br />
* report/upgrade.txt<br />
* repository/upgrade.txt<br />
* theme/upgrade.txt<br />
* user/upgrade.txt<br />
* webservice/upgrade.txt<br />
==See also==<br />
*[[Moodle 3.10 release notes]]<br />
<br />
[[Category:Release notes]]<br />
[[Category:Moodle 3.11]]<br />
<br />
[[fr:Notes de mise à jour de Moodle 3.11]]<br />
[[es:Notas de Moodle 3.11]]</div>Tim+Hunt