MOBILE-2389 qtype: Implement match and randomsamatch types

src/addon/qtype/match/component/match.html

@@ -0,0 +1,19 @@
+<section ion-list class="addon-qtype-match-container" *ngIf="question.loaded">
+    <ion-item text-wrap>
+        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
+    </ion-item>
+    <ion-item text-wrap *ngFor="let row of question.rows">
+        <ion-row>
+            <ion-col>
+                <p><core-format-text id="addon-qtype-match-question-{{row.id}}" [component]="component" [componentId]="componentId" [text]="row.text"></core-format-text></p>
+            </ion-col>
+            <ion-col [ngClass]='{"core-question-answer-correct": row.isCorrect === 1, "core-question-answer-incorrect": row.isCorrect === 0}'>
+                <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">{{ row.accessibilityLabel }}</label>
+                <ion-select id="{{row.id}}" [name]="row.name" [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [ngModel]="row.selected">
+                    <ion-option *ngFor="let option of row.options" [value]="option.value">{{option.label}}</ion-option>
+                </ion-select>
+                <!-- @todo: select fix? -->
+            </ion-col>
+        </ion-row>
+    </ion-item>
+</section>

src/addon/qtype/match/component/match.ts

@@ -0,0 +1,40 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, OnInit } from '@angular/core';
+import { CoreLoggerProvider } from '@providers/logger';
+import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreQuestionHelperProvider } from '@core/question/providers/helper';
+import { CoreQuestionBaseComponent } from '@core/question/classes/base-question-component';
+
+/**
+ * Component to render a match question.
+ */
+@Component({
+    selector: 'addon-qtype-match',
+    templateUrl: 'match.html'
+})
+export class AddonQtypeMatchComponent extends CoreQuestionBaseComponent implements OnInit {
+
+    constructor(logger: CoreLoggerProvider, questionHelper: CoreQuestionHelperProvider, domUtils: CoreDomUtilsProvider) {
+        super(logger, 'AddonQtypeMatchComponent', questionHelper, domUtils);
+    }
+
+    /**
+     * Component being initialized.
+     */
+    ngOnInit(): void {
+        this.initMatchComponent();
+    }
+}

src/addon/qtype/match/match.module.ts

@@ -0,0 +1,46 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreQuestionDelegate } from '@core/question/providers/delegate';
+import { CoreDirectivesModule } from '@directives/directives.module';
+import { AddonQtypeMatchHandler } from './providers/handler';
+import { AddonQtypeMatchComponent } from './component/match';
+
+@NgModule({
+    declarations: [
+        AddonQtypeMatchComponent
+    ],
+    imports: [
+        IonicModule,
+        TranslateModule.forChild(),
+        CoreDirectivesModule
+    ],
+    providers: [
+        AddonQtypeMatchHandler
+    ],
+    exports: [
+        AddonQtypeMatchComponent
+    ],
+    entryComponents: [
+        AddonQtypeMatchComponent
+    ]
+})
+export class AddonQtypeMatchModule {
+    constructor(questionDelegate: CoreQuestionDelegate, handler: AddonQtypeMatchHandler) {
+        questionDelegate.registerHandler(handler);
+    }
+}

src/addon/qtype/match/providers/handler.ts

@@ -0,0 +1,118 @@
+
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable, Injector } from '@angular/core';
+import { CoreQuestionProvider } from '@core/question/providers/question';
+import { CoreQuestionHandler } from '@core/question/providers/delegate';
+import { AddonQtypeMatchComponent } from '../component/match';
+
+/**
+ * Handler to support match question type.
+ */
+@Injectable()
+export class AddonQtypeMatchHandler implements CoreQuestionHandler {
+    name = 'AddonQtypeMatch';
+    type = 'qtype_match';
+
+    constructor(private questionProvider: CoreQuestionProvider) { }
+
+    /**
+     * Return the name of the behaviour to use for the question.
+     * If the question should use the default behaviour you shouldn't implement this function.
+     *
+     * @param {any} question The question.
+     * @param {string} behaviour The default behaviour.
+     * @return {string} The behaviour to use.
+     */
+    getBehaviour(question: any, behaviour: string): string {
+        if (behaviour === 'interactive') {
+            return 'interactivecountback';
+        }
+
+        return behaviour;
+    }
+
+    /**
+     * Return the Component to use to display the question.
+     * It's recommended to return the class of the component, but you can also return an instance of the component.
+     *
+     * @param {Injector} injector Injector.
+     * @param {any} question The question to render.
+     * @return {any|Promise<any>} The component (or promise resolved with component) to use, undefined if not found.
+     */
+    getComponent(injector: Injector, question: any): any | Promise<any> {
+        return AddonQtypeMatchComponent;
+    }
+
+    /**
+     * Check if a response is complete.
+     *
+     * @param {any} question The question.
+     * @param {any} answers Object with the question answers (without prefix).
+     * @return {number} 1 if complete, 0 if not complete, -1 if cannot determine.
+     */
+    isCompleteResponse(question: any, answers: any): number {
+        // We should always get a value for each select so we can assume we receive all the possible answers.
+        for (const name in answers) {
+            const value = answers[name];
+            if (!value || value === '0') {
+                return 0;
+            }
+        }
+
+        return 1;
+    }
+
+    /**
+     * Whether or not the handler is enabled on a site level.
+     *
+     * @return {boolean|Promise<boolean>} True or promise resolved with true if enabled.
+     */
+    isEnabled(): boolean | Promise<boolean> {
+        return true;
+    }
+
+    /**
+     * Check if a student has provided enough of an answer for the question to be graded automatically,
+     * or whether it must be considered aborted.
+     *
+     * @param {any} question The question.
+     * @param {any} answers Object with the question answers (without prefix).
+     * @return {number} 1 if gradable, 0 if not gradable, -1 if cannot determine.
+     */
+    isGradableResponse(question: any, answers: any): number {
+        // We should always get a value for each select so we can assume we receive all the possible answers.
+        for (const name in answers) {
+            const value = answers[name];
+            if (value && value !== '0') {
+                return 1;
+            }
+        }
+
+        return 0;
+    }
+
+    /**
+     * Check if two responses are the same.
+     *
+     * @param {any} question Question.
+     * @param {any} prevAnswers Object with the previous question answers.
+     * @param {any} newAnswers Object with the new question answers.
+     * @return {boolean} Whether they're the same.
+     */
+    isSameResponse(question: any, prevAnswers: any, newAnswers: any): boolean {
+        return this.questionProvider.compareAllAnswers(prevAnswers, newAnswers);
+    }
+}

src/addon/qtype/qtype.module.ts

@@ -15,8 +15,10 @@
 import { NgModule } from '@angular/core';
 import { AddonQtypeCalculatedMultiModule } from './calculatedmulti/calculatedmulti.module';
 import { AddonQtypeDescriptionModule } from './description/description.module';
+import { AddonQtypeMatchModule } from './match/match.module';
 import { AddonQtypeMultichoiceModule } from './multichoice/multichoice.module';
 import { AddonQtypeNumericalModule } from './numerical/numerical.module';
+import { AddonQtypeRandomSaMatchModule } from './randomsamatch/randomsamatch.module';
 import { AddonQtypeShortAnswerModule } from './shortanswer/shortanswer.module';
 import { AddonQtypeTrueFalseModule } from './truefalse/truefalse.module';
 
@@ -25,8 +27,10 @@ import { AddonQtypeTrueFalseModule } from './truefalse/truefalse.module';
     imports: [
         AddonQtypeCalculatedMultiModule,
         AddonQtypeDescriptionModule,
+        AddonQtypeMatchModule,
         AddonQtypeMultichoiceModule,
         AddonQtypeNumericalModule,
+        AddonQtypeRandomSaMatchModule,
         AddonQtypeShortAnswerModule,
         AddonQtypeTrueFalseModule
     ],

src/addon/qtype/randomsamatch/providers/handler.ts

@@ -0,0 +1,90 @@
+
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable, Injector } from '@angular/core';
+import { CoreQuestionHandler } from '@core/question/providers/delegate';
+import { AddonQtypeMatchHandler } from '@addon/qtype/match/providers/handler';
+import { AddonQtypeMatchComponent } from '@addon/qtype/match/component/match';
+
+/**
+ * Handler to support random short-answer matching question type.
+ */
+@Injectable()
+export class AddonQtypeRandomSaMatchHandler implements CoreQuestionHandler {
+    name = 'AddonQtypeRandomSaMatch';
+    type = 'qtype_randomsamatch';
+
+    constructor(private matchHandler: AddonQtypeMatchHandler) { }
+
+    /**
+     * Return the Component to use to display the question.
+     * It's recommended to return the class of the component, but you can also return an instance of the component.
+     *
+     * @param {Injector} injector Injector.
+     * @param {any} question The question to render.
+     * @return {any|Promise<any>} The component (or promise resolved with component) to use, undefined if not found.
+     */
+    getComponent(injector: Injector, question: any): any | Promise<any> {
+        // Random behaves like a match question, use the same component.
+        return AddonQtypeMatchComponent;
+    }
+
+    /**
+     * Check if a response is complete.
+     *
+     * @param {any} question The question.
+     * @param {any} answers Object with the question answers (without prefix).
+     * @return {number} 1 if complete, 0 if not complete, -1 if cannot determine.
+     */
+    isCompleteResponse(question: any, answers: any): number {
+        // This question behaves like a match question.
+        return this.matchHandler.isCompleteResponse(question, answers);
+    }
+
+    /**
+     * Whether or not the handler is enabled on a site level.
+     *
+     * @return {boolean|Promise<boolean>} True or promise resolved with true if enabled.
+     */
+    isEnabled(): boolean | Promise<boolean> {
+        return true;
+    }
+
+    /**
+     * Check if a student has provided enough of an answer for the question to be graded automatically,
+     * or whether it must be considered aborted.
+     *
+     * @param {any} question The question.
+     * @param {any} answers Object with the question answers (without prefix).
+     * @return {number} 1 if gradable, 0 if not gradable, -1 if cannot determine.
+     */
+    isGradableResponse(question: any, answers: any): number {
+        // This question behaves like a match question.
+        return this.matchHandler.isGradableResponse(question, answers);
+    }
+
+    /**
+     * Check if two responses are the same.
+     *
+     * @param {any} question Question.
+     * @param {any} prevAnswers Object with the previous question answers.
+     * @param {any} newAnswers Object with the new question answers.
+     * @return {boolean} Whether they're the same.
+     */
+    isSameResponse(question: any, prevAnswers: any, newAnswers: any): boolean {
+        // This question behaves like a match question.
+        return this.matchHandler.isSameResponse(question, prevAnswers, newAnswers);
+    }
+}

src/addon/qtype/randomsamatch/randomsamatch.module.ts

@@ -0,0 +1,30 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { CoreQuestionDelegate } from '@core/question/providers/delegate';
+import { AddonQtypeRandomSaMatchHandler } from './providers/handler';
+
+@NgModule({
+    declarations: [
+    ],
+    providers: [
+        AddonQtypeRandomSaMatchHandler
+    ]
+})
+export class AddonQtypeRandomSaMatchModule {
+    constructor(questionDelegate: CoreQuestionDelegate, handler: AddonQtypeRandomSaMatchHandler) {
+        questionDelegate.registerHandler(handler);
+    }
+}

src/core/question/classes/base-question-component.ts

@@ -96,6 +96,98 @@ export class CoreQuestionBaseComponent {
         return questionDiv;
     }
 
+    /**
+     * Initialize a question component with a "match" behaviour.
+     *
+     * @return {void|HTMLElement} Element containing the question HTML, void if the data is not valid.
+     */
+    initMatchComponent(): void | HTMLElement {
+        const questionDiv = this.initComponent();
+
+        if (questionDiv) {
+            // Find rows.
+            const rows = Array.from(questionDiv.querySelectorAll('tr'));
+            if (!rows || !rows.length) {
+                this.logger.warn('Aborting because couldn\'t find any row.', this.question.name);
+
+                return this.questionHelper.showComponentError(this.onAbort);
+            }
+
+            this.question.rows = [];
+
+            for (const i in rows) {
+                const row = rows[i],
+                    rowModel: any = {},
+                    columns = Array.from(row.querySelectorAll('td'));
+
+                if (!columns || columns.length < 2) {
+                    this.logger.warn('Aborting because couldn\'t the right columns.', this.question.name);
+
+                    return this.questionHelper.showComponentError(this.onAbort);
+                }
+
+                // Get the row's text. It should be in the first column.
+                rowModel.text = columns[0].innerHTML;
+
+                // Get the select and the options.
+                const select = columns[1].querySelector('select'),
+                    options = Array.from(columns[1].querySelectorAll('option'));
+
+                if (!select || !options || !options.length) {
+                    this.logger.warn('Aborting because couldn\'t find select or options.', this.question.name);
+
+                    return this.questionHelper.showComponentError(this.onAbort);
+                }
+
+                rowModel.id = select.id;
+                rowModel.name = select.name;
+                rowModel.disabled = select.disabled;
+                rowModel.selected = false;
+                rowModel.options = [];
+
+                // Check if answer is correct.
+                if (columns[1].className.indexOf('incorrect') >= 0) {
+                    rowModel.isCorrect = 0;
+                } else if (columns[1].className.indexOf('correct') >= 0) {
+                    rowModel.isCorrect = 1;
+                }
+
+                // Treat each option.
+                for (const j in options) {
+                    const optionEl = options[j];
+
+                    if (typeof optionEl.value == 'undefined') {
+                        this.logger.warn('Aborting because couldn\'t find the value of an option.', this.question.name);
+
+                        return this.questionHelper.showComponentError(this.onAbort);
+                    }
+
+                    const option = {
+                        value: optionEl.value,
+                        label: optionEl.innerHTML,
+                        selected: optionEl.selected
+                    };
+
+                    if (option.selected) {
+                        rowModel.selected = option;
+                    }
+
+                    rowModel.options.push(option);
+                }
+
+                // Get the accessibility label.
+                const accessibilityLabel = columns[1].querySelector('label.accesshide');
+                rowModel.accessibilityLabel = accessibilityLabel && accessibilityLabel.innerHTML;
+
+                this.question.rows.push(rowModel);
+            }
+
+            this.question.loaded = true;
+        }
+
+        return questionDiv;
+    }
+
     /**
      * Initialize a question component with a multiple choice (checkbox) or single choice (radio).
      *