iss1211 - Documentation

Author: EJMFarrow

db/mobile.php

@@ -31,7 +31,7 @@
                 'delegate' => 'CoreQuestionDelegate',
                 'method' => 'stack_view',
                 'styles' => [
-                    'url' => $CFG->wwwroot . '/question/type/stack/mobile.css?v=2024091200',
+                    'url' => $CFG->wwwroot . '/question/type/stack/mobile.css',
                     'version' => 2024080200,
                 ],
             ],

doc/en/Developer/Moodle_app.md

@@ -0,0 +1,39 @@
+# Moodle App compatibility
+
+The following files have been added to make STACK compatible with the Moodle App:
+
+## Files
+
+### db/mobile.php
+Sets up a Moodle webservice to serve STACK questions to the app. Points to the mobile CSS file. Update the version here if you update the CSS.
+
+### classes/output/monile.php
+Points the Moodle webservice to the ionic template and javascript files. (Worth changing the JS to the unminified version while developing.)
+
+### mobile.css
+Mostly a straight copy of styles.css with a few extra classes. Also moves pix references to within STACK due to relative URL issues.
+
+### mobile/stack.html
+Ionic template to build the question. This is very basic as we are essentially just filtering the original in-browser HTML. Because STACK questions are so complicated and can have elements in any order we can't do anything clever here.
+
+### mobile/stack.js, mobile/stack.min.js
+The complicated bit. The Moodle App receives a JSON object with the original HTML of the question, metadata and script code. This is then inspected by stack.js. Plain radio, dropdown and checkbox elements are replaced by native elements. Code for iFrames is extracted, updated and then used to create the iFrames. Inputs are initialised.
+
+The code includes large chunks of duplicate code from input.js and stackjsvle.js with updates due to requiring different element selectors for the native elements. Because the JS is served to the App as part of the webservice, even a way to split it up into separate files is currently obscure, let alone modularising it so we can use the same code in STACK and the App.
+
+`uglifyjs stack.js > stack.min.js`
+
+### app.feature, jsx_app_test.feature
+Behat tests for all input types and a basic JSX test.
+
+## Running locally
+
+- Clone the app repository.  
+`npm install`  
+`npm start`
+- Close the browser window that opens automatically and instead start chromium:
+`chromium --allow-file-access-from-files --disable-web-security --disable-site-isolation-trials --allow-running-insecure-content --no-referrers --unlimited-storage  --ignore-certificate-errors --disable-infobars --user-data-dir=~/.chromium-dev-data`
+- Go to `localhost:8100`
+
+## Known issues
+- GeoGebra not yet tested due to local setup issues.

doc/meta_en.json

@@ -872,6 +872,11 @@
         "description":"Maxima has a very wide range of optional packages. Read about options for adding more Maxima packages to your installation of STACK."
         },
         {
+        "file":"Moodle_app.md",
+        "title":"Maintaining Moodle App compatibility - STACK Documentation",
+        "description":"A rundown of the files which allow STACK to operate in the Moodle App."
+        },
+        {
         "file":"Parser.md",
         "title":"Building the parser",
         "description":"This document describes the design of the parser for dealing with students' answers and Maxima statements."
@@ -1102,7 +1107,7 @@
         "title":"Vector Calculus - STACK Documentation",
         "description":"This page provides advice for writing STACK questions in vector calculus."
         }
-      ] 
+      ]
       }
     ]
 }

mobile/stack.js

@@ -170,16 +170,16 @@ var result = {
                 iframe += 'false';
             }
             const args = JSON.parse('[' + iframe + ']');
-            // Scripts are now being loaded cross origin and Chrome complains.
+            // Load included style sheet separately due to relative location issues.
             const baseRef = siteUrl + "/question/type/stack/corsscripts/cors.php?name=";
             args[1] = args[1].replace(baseRef + 'sortable.min.css" rel="stylesheet">',
-                baseRef + 'sortable.min.css" crossorigin="anonymous" rel="stylesheet">'
-                + '<link rel="stylesheet" crossorigin="anonymous" href="' + baseRef + 'styles.css"></link>');
+                baseRef + 'sortable.min.css" rel="stylesheet">'
+                + '<link rel="stylesheet" href="' + baseRef + 'styles.css"></link>');
+            // Scripts are now being loaded cross origin and Chrome complains.
+            // It may just be a dev environment issue.
             args[1] = args[1].replace(/<img/g, '<img crossorigin=\'anonymous\'');
-            args[1] = args[1].replace(baseRef + 'geogebracore.js"', baseRef + 'geogebracore.js" crossorigin="anonymous"');
-            args[1] = args[1].replace(baseRef + 'jsxgraph.min.css"', baseRef + 'jsxgraph.min.css" crossorigin="anonymous"');
-            args[1] = args[1].replace(baseRef + 'jsxgraphcore.min.js"',
-                baseRef + 'jsxgraphcore.min.js" crossorigin="anonymous"');
+            args[1] = args[1].replace(/<script/g, '<script crossorigin=\'anonymous\'');
+            args[1] = args[1].replace(/<link/g, '<link crossorigin=\'anonymous\'');
             iframesArgs.push(args);
         }