|
|
| (30 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| | | {{Template:Migrated|newDocId=/general/app/development/plugins-development-guide/examples/question-types}} |
| An empty template for creating quiz question types is available from here
| |
| | |
| https://github.com/marcusgreen/moodle-qtype_TEMPLATE
| |
| | |
| and it incorporates the skeleton code for supporting the App.
| |
| | |
| The files that need to be modified/added are
| |
| | |
| * db/mobile.php
| |
| * classes/output/mobile.php
| |
| * mobile/mobile.js
| |
| * mobile/addon-qtype-YOURQTYPENAME.html
| |
| * styles_app.css
| |
| | |
| ==== db/mobile.php ====
| |
| <code 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
| |
| ],
| |
| ]
| |
| ];
| |
| </code>
| |
| | |
| ==== html template ====
| |
| Your question type will need an html/ionic markup template file that controls how it is displayed at runtime. This is the template from the core shortanswer question type and gives an idea of some of the options. You can see a real world examples of this file 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
| |
| | |
| <code>
| |
| <section ion-list *ngIf="question.text || question.text === ''">
| |
| <ion-item text-wrap>
| |
| <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
| |
| </ion-item>
| |
| <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}"
| |
| [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off"
| |
| [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
| |
| </ion-input>
| |
| </section>
| |
| </code>
| |
| | |
| ==== classes/output/mobile.php ====
| |
| | |
| Create a new file classes/output/mobile.php
| |
| <code>
| |
| 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')
| |
| ];
| |
| }
| |
| }
| |
|
| |
| </Code>
| |
