Difference between revisions of "Creating mobile question types"

Jump to: navigation, search
Line 44: Line 44:
 
];
 
];
 
</code>
 
</code>
Your question type will need an html 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
+
Your question type will need an html 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 example of this file at
 +
https://github.com/Beedell/moodle-qtype_oumultiresponse/blob/wip1/mobile/oumr.html
 +
 
 +
==== html template ====
 +
 
 +
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>

Revision as of 11:37, 1 January 2019

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

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
        ],
    ]
];

Your question type will need an html 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 example of this file at https://github.com/Beedell/moodle-qtype_oumultiresponse/blob/wip1/mobile/oumr.html

html template

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

<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>