First try at mobile 3.x support

3 files changed, 110 insertions, 0 deletions

diff --git a/mobile/algebra.html b/mobile/algebra.html
new file mode 100644
index 0000000..4f08aad
--- /dev/null
+++ b/mobile/algebra.html
@@ -0,0 +1,25 @@
+<section class="qtype-algebra" ion-list *ngIf="question.text || question.text === ''">
+    <ion-item text-wrap>
+            <core-format-text [component]="component"
+                [componentId]="componentId" [text]="question.text">
+            </core-format-text>
+    </ion-item>
+    <ion-item>
+        <ion-label
+            stacked
+            color="gray"
+            padding-left>
+            {{ 'core.question.answer' | translate }}:
+        </ion-label>
+        <ion-input
+            padding-left
+            type="text"
+            [attr.name]="question.input.name"
+            [value]="question.input.value"
+            autocorrect="off"
+            [disabled]="question.input.readOnly"
+            [ngClass]="[question.input.correctClass]"
+        >
+        </ion-input>
+    </ion-item>
+</section>
diff --git a/mobile/algebra.js b/mobile/algebra.js
new file mode 100644
index 0000000..fa3e6d1
--- /dev/null
+++ b/mobile/algebra.js
@@ -0,0 +1,51 @@
+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');
+         // Get question input.
+        const input = div.querySelector('input[type="text"][name*=answer]');
+
+        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 = questiontext.innerHTML;
+        this.question.input = input;
+
+        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);
+        }
+
+        // Check if question is marked as correct.
+        if (input.classList.contains('incorrect')) {
+            this.question.input.correctClass = 'qtype-algebra question-incorrect';
+        } else if (input.classList.contains('correct')) {
+            this.question.input.correctClass = 'qtype-algebra question-correct';
+        } else if (input.classList.contains('partiallycorrect')) {
+            this.question.input.correctClass = 'qtype-algebra question-partiallycorrect';
+        }
+
+        // @codingStandardsIgnoreStart
+        // Wait for the DOM to be rendered.
+        setTimeout(() => {
+
+        });
+        // @codingStandardsIgnoreEnd
+        return true;
+    }
+};
+result;
\ No newline at end of file
diff --git a/mobile/styles_app.css b/mobile/styles_app.css
new file mode 100644
index 0000000..c60d318
--- /dev/null
+++ b/mobile/styles_app.css
@@ -0,0 +1,34 @@
+.collapsibleregioncaption {
+    display: none;
+}
+.qtype-algebra .text-input,
+.qtype-algebra .text-input-md {
+    border: 1px solid #ccc;
+    padding: 4px 6px;
+    border-radius: 4px;
+    margin: 0px 0px;
+    width: calc(100% - 20px);
+    font-size: 1.4rem;
+}
+.qtype-algebra .item-input {
+    padding-left: 6px;
+    margin-top: -14px;
+}
+.qtype-algebra .question-correct:after,
+.qtype-algebra .question-incorrect:after,
+.qtype-algebra .question-partiallycorrect:after {
+    font-family: FontAwesome;
+    padding-left: 3px;
+}
+.qtype-algebra .question-correct:after {
+    content: "\f00c";
+    color: #5e8100;
+}
+.qtype-algebra .question-incorrect:after {
+    content: "\f00d";
+    color: #cb3d4d;
+}
+.qtype-algebra .question-partiallycorrect:after {
+    content: "\f046";
+    color: #f98012;
+}