Merge pull request #1738 from maths/nrw9

Nrw9 - Adapt block for API

Author: sangwinc

api/public/sample.php

@@ -172,14 +172,14 @@ function toggleAnswer(button) {
                 <div id="stackapi_validity" style="color:darkred"></div>
               </div>
               <br>
-              <div id="stackapi_combinedfeedback" class="feedback col-lg-8" style="display: none">
+              <div id="stackapi_combinedfeedback" class="feedback outcome col-lg-8" style="display: none">
                 <div id="specificfeedback"></div>
                 <div id="generalfeedback"></div>
               </div>
               <div id="stackapi_correct" style="display: none">
                 <div class="noninfo">
                   <h2>Correct answers:</h2>
-                  <div id="formatcorrectresponse" class="feedback"></div>
+                  <div id="formatcorrectresponse" class="feedback outcome"></div>
                 </div>
               </div>
             </div>

api/public/stack.php

@@ -178,26 +178,26 @@ function render_directory($dirdetails) {
         </div>
         <div id="stackapi_generalfeedback" class="col-lg-8" style="display: none">
           <h2>General feedback:</h2>
-          <div id="generalfeedback" class="feedback"></div>
+          <div id="generalfeedback" class="feedback outcome"></div>
         </div>
         <div id="stackapi_questionnote" class="col-lg-8" style="display: none">
           <h2>Question note:</h2>
-          <div id="questionnote" class="feedback"></div>
+          <div id="questionnote" class="feedback outcome"></div>
         </div>
         <h2 id="stackapi_score" style="display: none">Score: <span id="score"></span></h2>
         <div id="stackapi_summary" class="col-lg-10" style="display: none">
           <h2><?php echo stack_string('api_response')?>:</h2>
-          <div id="response_summary" class="feedback"></div>
+          <div id="response_summary" class="feedback outcome"></div>
         </div>
         <div id="stackapi_correct" class="col-lg-10" style="display: none">
           <div class="noninfo">
             <h2>Response summary:</h2>
-            <div id="formatcorrectresponse" class="feedback"></div>
+            <div id="formatcorrectresponse" class="feedback outcome"></div>
           </div>
         </div>
         <div id="stackapi_difference" class="col-lg-10" style="display: none">
             <h2>YAML representation based on API defaults:</h2>
-            <div id="difference" class="feedback" style="white-space: pre;"></div>
+            <div id="difference" class="feedback outcome" style="white-space: pre;"></div>
           </div>
         </div>
       </div>

api/public/stackjsvle.js

@@ -64,14 +64,14 @@
      * @param {String} id the identifier of the element we want.
      */
     function vle_get_element(id) {
-        /* In the case of Moodle we are happy as long as the element is inside
-           something with the `formulation`-class. */
         let candidate = document.getElementById(id);
         let iter = candidate;
-        while (iter && !iter.classList.contains('formulation')) {
+        while (iter && !iter.classList.contains('formulation') &&
+               !iter.classList.contains('outcome')) {
             iter = iter.parentElement;
         }
-        if (iter && iter.classList.contains('formulation')) {
+        if (iter && (iter.classList.contains('formulation') ||
+            iter.classList.contains('outcome'))) {
             return candidate;
         }
 
@@ -99,10 +99,12 @@
            something with the `formulation`-class. */
         let initialcandidate = document.getElementById(srciframe);
         let iter = initialcandidate;
-        while (iter && !iter.classList.contains('formulation')) {
+        while (iter && !iter.classList.contains('formulation') &&
+               !iter.classList.contains('outcome')) {
             iter = iter.parentElement;
         }
-        if (iter && iter.classList.contains('formulation')) {
+        if (iter && (iter.classList.contains('formulation') ||
+            iter.classList.contains('outcome'))) {
             // iter now represents the borders of the question containing
             // this IFRAME.
             let possible = iter.querySelector('input[id$="_' + name + '"]');
@@ -313,6 +315,14 @@
                 }
             }
 
+            // Transfer all data attributes of the input. Note that while most come from
+            // STACK some might come from the VLE. For truly portable stuff only use ones
+            // startting with "stack". Basically, the "initialValue" one comes from Moodle.
+            response['input-dataset'] = {};
+            for (var k in input.dataset) {
+                response['input-dataset'][k] = input.dataset[k];
+            }
+
             // 3. Add listener for changes of this input.
             if (input.id in INPUTS) {
                 if (msg.src in INPUTS[input.id]) {
@@ -468,6 +478,37 @@
                 }
             }
 
+            break;
+        case 'register-button-listener':
+            // 1. Find the element.
+            element = vle_get_element(msg.target);
+
+            if (element === null) {
+                // Requested something that is not available.
+                const ret = {
+                    version: 'STACK-JS:1.2.0',
+                    type: 'error',
+                    msg: 'Failed to find element: "' + msg.target + '"',
+                    tgt: msg.src
+                };
+                IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(ret), '*');
+                return;
+            }
+
+            // 2. Add a listener, no need to do anything more
+            // complicated than this.
+            element.addEventListener('click', (event) => {
+                let resp = {
+                    version: 'STACK-JS:1.2.0',
+                    type: 'button-click',
+                    name: msg.target,
+                    tgt: msg.src
+                };
+                IFRAMES[msg.src].contentWindow.postMessage(JSON.stringify(resp), '*');
+                // These listeners will stop the submissions of buttons which might be a problem.
+                event.preventDefault();
+            });
+
             break;
         case 'toggle-visibility':
             // 1. Find the element.

api/public/stackshared.js

@@ -258,6 +258,7 @@ function answer() {
     http.open("POST", url, true);
 
     if (!document.getElementById('output').innerText) {
+        loading(false);
         return;
     }
 

stack/cas/castext2/blocks/adapt.block.php

@@ -60,7 +60,7 @@ public function compile($format, $options): ?MP_Node {
 
     // phpcs:ignore moodle.Commenting.MissingDocblock.Function
     public function is_flat(): bool {
-        return true;
+        return false;
     }
 
     // phpcs:ignore moodle.Commenting.MissingDocblock.Function