Changed sampleanswer evaluate to use a disabled text area in the form

and tightend up the spinner while the request is being processed.

Author: marcusgreen

amd/build/responserun.min.js

@@ -0,0 +1,95 @@
+// This file is part of Moodle - http://moodle.org/ //
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+import {get_strings} from 'core/str';
+import Ajax from 'core/ajax';
+import Log from 'core/log';
+import Notify from 'core/notification';
+import {exception as displayException} from 'core/notification';
+
+/**
+ * Question AI Text Edit Form Helper
+ *
+ * @module     qtype_aitext/editformhelper
+ * @copyright  2024 Justin Hunt <justin@poodll.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+const Selectors = {
+    fields: {
+        sampleanswer: '#id_sampleanswer',
+        sampleanswerbtn: '#id_sampleanswerbtn',
+        sampleanswereval: '#id_sampleanswereval',
+        aiprompt: '#id_aiprompt',
+        markscheme: '#id_markscheme',
+        defaultmark: '#id_defaultmark',
+    },
+};
+
+/**
+ * Initialise the format chooser.
+ */
+export const init = (contextid) => {
+    return;
+
+    // Set up strings
+    var strings={};
+    get_strings([
+        { "key": "prompttester", "component": 'qtype_aitext'},
+        { "key": "sampleanswerempty", "component": 'qtype_aitext'},
+
+    ]).done(function (s) {
+        var i = 0;
+        strings.prompttester = s[i++];
+        strings.sampleanswerempty = s[i++];
+    });
+
+    document.querySelector(Selectors.fields.sampleanswerbtn).addEventListener('click', e => {
+
+        const form = e.target.closest('form');
+        const sampleanswer = form.querySelector(Selectors.fields.sampleanswer);
+        const sampleanswereval = form.querySelector(Selectors.fields.sampleanswereval);
+        const aiprompt = form.querySelector(Selectors.fields.aiprompt);
+        const marksscheme = form.querySelector(Selectors.fields.markscheme);
+        const defaultmark = form.querySelector(Selectors.fields.defaultmark);
+
+        if (sampleanswer.value === "" || aiprompt.value === "") {
+            Notify.alert(strings.prompttester, strings.sampleanswerempty);
+            return;
+        }
+
+        //put  spinner in place
+        sampleanswereval.innerHTML='<i class="icon fa fa-spinner fa-spin fa-2x"></i>';
+
+        Ajax.call([{
+            methodname: 'qtype_aitext_fetch_ai_grade',
+            args: {
+                response: sampleanswer.value,
+                defaultmark: defaultmark.value,
+                prompt: aiprompt.value,
+                marksscheme: marksscheme.value,
+                contextid: contextid
+            },
+            async: false
+        }])[0].then(function(airesponse) {
+            Log.debug(airesponse);
+            if (airesponse.feedback) {
+                sampleanswereval.textContent = airesponse.feedback + ' (GRADE: ' + airesponse.marks + '/' + defaultmark.value + ')';
+            }
+        }).fail(error => {
+            displayException(error);
+            sampleanswereval.innerHTML = '';
+        });
+    });//end of click
+};

amd/build/responserun.min.js.map

@@ -32,6 +32,7 @@ const Selectors = {
         sampleanswer: '#id_sampleanswer',
         sampleanswerbtn: '#id_sampleanswerbtn',
         sampleanswereval: '#id_sampleanswereval',
+        spinner: '#id_spinner',
         aiprompt: '#id_aiprompt',
         markscheme: '#id_markscheme',
         defaultmark: '#id_defaultmark',
@@ -51,7 +52,6 @@ export const init = (contextid) => {
         strings.prompttester = s[i++];
         strings.sampleanswerempty = s[i++];
     });
-
     document.querySelector(Selectors.fields.sampleanswerbtn).addEventListener('click', e => {
         const form = e.target.closest('form');
         const sampleanswer = form.querySelector(Selectors.fields.sampleanswer);
@@ -60,14 +60,18 @@ export const init = (contextid) => {
         const aiprompt = form.querySelector(Selectors.fields.aiprompt);
         const marksscheme = form.querySelector(Selectors.fields.markscheme);
         const defaultmark = form.querySelector(Selectors.fields.defaultmark);
+        const spinner = form.querySelector(Selectors.fields.spinner);
 
         if (sampleanswer.value === "" || aiprompt.value === "") {
             Notify.alert(strings.prompttester, strings.sampleanswerempty);
             return;
         }
      // Put  spinner in place.
-     sampleanswereval.innerHTML = '<i class="icon fa fa-cog fa-spin"></i>';
-     sampleanswereval.classList.remove('hide');
+     spinner.innerHTML = '<span class="loading-icon icon-no-margin">';
+     spinner.innerHTML += ' <i class="fa fa-spinner fa-spin fa-3x fa-fw"" title="Loading" role="img" aria-label="Loading"></i>';
+     spinner.innerHTML += '</span>';
+
+     spinner.classList.remove('hide');
      Ajax.call([{
         methodname: 'qtype_aitext_fetch_ai_grade',
         args: {
@@ -82,8 +86,7 @@ export const init = (contextid) => {
         Log.debug(airesponse);
         if (airesponse.feedback) {
             sampleanswereval.textContent = airesponse.feedback + ' (GRADE: ' + airesponse.marks + '/' + defaultmark.value + ')';
-            sampleanswereval.classList.add("qtype_aitext_sampleanswereval");
-
+            spinner.classList.add('hide');
         }
         return true;
     }).fail(error => {

amd/src/editformhelper.js.org

@@ -82,15 +82,28 @@ protected function definition_inner($mform) {
         $mform->addElement('html', '</div>');
 
         $mform->addElement('header', 'prompttester', get_string('prompttester', 'qtype_aitext'));
+
         $mform->addElement('textarea', 'sampleanswer', get_string('sampleanswer', 'qtype_aitext'),
             ['maxlen' => 50, 'rows' => 6, 'size' => 30]);
         $mform->setType('sampleanswer', PARAM_RAW);
         $mform->setDefault('sampleanswer', '');
-        $mform->addElement('static', 'sampleanswereval', '',  '<div class ="hide col-md-9" id="id_sampleanswereval"></div>');
+        $mform->addElement('static', 'spinner', '',  '<div class ="hide col-md-9" id="id_spinner"></div>');
 
         $mform->addElement('button', 'sampleanswerbtn"', get_string('sampleanswerevaluate', 'qtype_aitext'),);
         $mform->registerNoSubmitButton('sampleanswerbtn"');
 
+
+        $options = [
+            'cols' => 50,
+            'rows' => 5,
+            'disabled' => 'disabled',
+        ];
+
+        $mform->addElement('textarea', 'sampleanswereval', get_string('sampleanswereval', 'qtype_aitext'), $options);
+
+
+        $mform->setDefault('element_name', 'The default value');
+
         $mform->addElement('header', 'responseoptions', get_string('responseoptions', 'qtype_aitext'));
         $mform->setExpanded('responseoptions');
 

amd/src/responserun.js

@@ -24,7 +24,7 @@
  */
 
 $string['acceptedfiletypes'] = 'Accepted file types';
-
+$string['sampleanswereval'] = 'Sample Answer Evaluation';
 $string['aiprompt'] = 'AI Prompt';
 $string['aiprompt_help'] = 'A prompt for the Ai Grader. This is the guideline that AI uses to give feedback on the student response.';
 $string['aipromptmissing'] = 'The ai prompt is missing. Please enter a prompt on the basis of which the feedback is generated.';