Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Creating mobile question types

From MoodleDocs
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

An empty template for creating quiz question types with mobile support is available from here

https://github.com/marcusgreen/moodle-qtype_TEMPLATE

The files that need to be modified/added are

db/mobile.php

defined('MOODLE_INTERNAL') || die();

$addons = [

   "qtype_YOURQTYPENAME" => [
       "handlers" => [ // Different places where the add-on will display content.
           'YOURQTYPENAME' => [ // Handler unique name (can be anything).
               'displaydata' => [
                   'title' => 'YOURQTYPENAME question',
                   'icon' => '/question/type/YOURQTYPENAME/pix/icon.gif',
                   'class' => ,
               ],
               'delegate' => 'CoreQuestionDelegate', // Delegate (where to display the link to the add-on).
               'method' => 'mobile_get_YOURQTYPENAME',
               'offlinefunctions' => [
                   'mobile_get_YOURQTYPENAME' => [],// function in classes/output/mobile.php
               ], // Function needs caching for offline.
               'styles' => [
                   'url' => '/question/type/YOURQTYPENAME/mobile/styles_app.css',
                   'version' => '1.00'
               ]
           ]
       ],
       'lang' => [
                   ['pluginname', 'qtype_YOURQTYPENAME'], // matching value in  lang/en/qtype_YOURQTYPENAME
       ],
   ]

];

html template

Your question type will need an html/ionic markup template file that controls how it is displayed at runtime. Ionic markup is based on the Angular template syntax which you can read about here https://angular.io/guide/template-syntax

You can see a real world examples of question type templates at

https://github.com/Beedell/moodle-qtype_oumultiresponse/blob/wip1/mobile/oumr.html and

https://github.com/marcusgreen/moodle-qtype_gapfill/blob/master/mobile/addon-qtype-gapfill.html

(oumr.html is probably a more sensible naming convetion)

Create a file named mobile/addon-qtype-YOURQTYPENAME.html

<section class="list qtype-YOURQTYPENAME-container qtype-YOURQTYPENAME" ion-list *ngIf="question.text || question.text === ">

   <ion-item text-wrap class="addon-qtype-YOURQTYPENAME-container qtext">

<core-format-text [component]="component" [componentId]="componentId" [text]="question.text" (afterRender)="questionRendered()"></core-format-text>

   </ion-item>

</section>

The reference to questionRendered() will call the method of that name in the mobile/mobile.js file.

classes/output/mobile.php

This file connects PHP with the html/ionic markup template and the mobile.js javascript which contains most of the runtime logic namespace qtype_YOURQTYPENAME\output;

defined('MOODLE_INTERNAL') || die();

class mobile {

class mobile {

   public static function mobile_get_YOURQTYPENAME() {
       global $CFG;
       return [
           'templates' => [
               [
                   'id' => 'main',
                   'html' => file_get_contents($CFG->dirroot .'/question/type/YOURQTYPENAME/mobile/addon-qtype-YOURQTYPENAME.html')
                   ]
           ],
           'javascript' => file_get_contents($CFG->dirroot . '/question/type/YOURQTYPENAME/mobile/mobile.js')
       ];
   }

}

mobile/mobile.js

This is where most of the logic is placed such as changing css classes. You can see real world implementations of this file at https://github.com/Beedell/moodle-qtype_oumultiresponse/blob/wip1/mobile/oumr.js and https://github.com/marcusgreen/moodle-qtype_gapfill/blob/master/mobile/mobile.js var that = this; var result = {

   componentInit: function() {
       if (!this.question) {
           console.warn('Aborting because of no question received.');
           return that.CoreQuestionHelperProvider.showComponentError(that.onAbort);
       }
       const div = document.createElement('div');
       div.innerHTML = this.question.html;
        // Get question questiontext.
       const questiontext = div.querySelector('.qtext');
       // Replace Moodle's correct/incorrect and feedback classes with our own.
       // Only do this if you want to use the standard classes
       this.CoreQuestionHelperProvider.replaceCorrectnessClasses(div);
       this.CoreQuestionHelperProvider.replaceFeedbackClasses(div);
        // Treat the correct/incorrect icons.
       this.CoreQuestionHelperProvider.treatCorrectnessIcons(div);


       if (div.querySelector('.readonly') !== null) {
           this.question.readonly = true;
       }
       if (div.querySelector('.feedback') !== null) {
           this.question.feedback = div.querySelector('.feedback');
           this.question.feedbackHTML = true;
       }
       
        this.question.text = this.CoreDomUtilsProvider.getContentsOfElement(div, '.qtext');
       if (typeof this.question.text == 'undefined') {
           this.logger.warn('Aborting because of an error parsing question.', this.question.name);
           return this.CoreQuestionHelperProvider.showComponentError(this.onAbort);
       }
       // Called by the reference in *.html to 
       // (afterRender)="questionRendered()
       this.questionRendered = function questionRendered() {
           //do stuff that needs the question rendered before it can run.
       }
       // Wait for the DOM to be rendered.
       setTimeout(() => {
           //put stuff here that will be pulled from the rendered question
       });
       return true;
   }

}; result;

mobile/styles_app.css

This assumes you have class="qtype-YOURQTYPENAME-container in your html template. Changes will be updated when you increment the value of styles[version] in db/mobile.php .qtype-YOURQTYPENAME .yourclassname {

    attributename: attributevalue;

}