Graph in HTML-Field

Re: Graph in HTML-Field

de către Richard Lobb-
Număr de răspunsuri: 4

Hi Markus

Ah yes, of course. I misunderstood - or perhaps forgot - the purpose of your ___textareaid___ macro.

I've pulled your change into Master and also into the development branch I'm working on. I've added the following documentation - please check if it's correct.

=======================

The textareaid macro

A problem arises if the HTML supplied by the question author contains elements with explicit id attributes, as might be required if there is also JavaScript present that needs to refer to the new elements. If the review options allow display of the question author's answer then when the student reviews their quiz, the student answer and the author's answer will both include the new elements, resulting in a conflict of id. Apart from being invalid HTML, this is likely to result in wrong results when any JavaScript code referencing the elements runs.

A workaround for this problem is to include the special macro string

___textareaid___

as part of any new ids. Note that there are THREE (3) underscores at both the start and end of the macro string.

When the HTML UI inserts the global extra html into the question, that macro is replaced everywhere by the actual ID of the answer box's text-area, which is different for the student and author answers. This technique can also be used to ensure that the names given to elements like radio buttons are different in the two answers.

Thanks Markus Gafner for this workaround.

========================

I did think of wrapping the inserted HTML in a form to prevent cross-contamination of radio button names between the student and author answers, but the HTML5 standard doesn't allow forms to be nested and entire quiz review page is wrapped in a form. I don't wish to create illegal HTML or depend on unspecified and possibly browser-dependent behaviour.

Thanks for the contribution

Richard

Ca răspuns la Richard Lobb

Re: Graph in HTML-Field

de către Markus Gafner-
Dear Richard,
thanks for taking my changes in your code. The macro I defined is ___textareaId___ (with an upper case I). Also, it would be ok for me if you remove my name. It is just a single line, which has been changed. But I would include a paragraph, where gets described that it is possible to include the graph-ui in the HTML question type. The rest sounds okey for me.

Furthermore, I would like to inform you, that the amd-script are not up to date. So, when you generate a new version, the scripts must be updated.

Last week, we presented the results to the students. The students reported that their answers are not completed. I did a simple test and recognized the problem. We had an exam where the students had 60 minutes time to solve the questions. After this time, we set Moodle to collect the answers and evaluate them. To see the problem, I did a simple test with a small HTML-form, 2 fields, 1 minute answer-time. I entered something in the HTML-forms but did not send it to Moodle, because I wanted that Moodle collects the data. I got 0 points because my answer was empty. Repeating this rest with a python-question which uses the Ace-editor has shown, that collecting the data would work, but not for the HTML-formular. My first question could you reconstruct this error, and do you have any clue why this happens? Also do you think the answers are still stored somewhere?
Ca răspuns la Markus Gafner

Re: Graph in HTML-Field

de către Richard Lobb-

Thanks for picking up the error of the lower-case 'i'. Fixed now.

I've changed the "Thanks for Markus Gafner" paragraph to

As an example application of this capability, see this CodeRunner author's forum thread where Markus Gafner (who contributed this workaround) shows a TextUI question with an embedded GraphUI question, plus other embedded questions.

Are you happy to have your name mentioned there or would you like me to remove it altogether?

I do always use grunt to rebuild the 'build' versions of amd modules before committing. But when I merged your pull request into master I made the mistake of assuming you had included any changed code in the pull request. However, I don't think it breaks anything - your textareaId feature isn't documented in the master branch yet and the fact that it doesn't work in the 'build' version shouldn't be a problem.

I'm sorry to hear about the failures in the test last week. Indeed if you depend entirely on "Open attempts are submitted automatically" it seems there's a problem, which I wasn't aware of.

The contents of the various CodeRunner UI elements are sync'd back to the underlying textarea answerbox only when a question is saved or submitted, which includes:
  • when the student clicks Check or Precheck,
  • when the user navigates to a different quiz page
  • when the user explicitly submits their quiz.
The only exceptions are the AceUI and the GraphUI, both of which sync after every change.

I would have expected the "Open attempts are submitted automatically" feature, which is implemented in JavaScript, would initiate a submit operation on the form which should have in turn called my own sync code. But that seems not to be happening. I'll look into it. But I fear that the data is lost - all that is getting sent to the server on a quiz timeout is the unsync'd raw text area contents.
Ca răspuns la Richard Lobb

Re: Graph in HTML-Field

de către Markus Gafner-

Dear Richard,

sorry for the long delay, i was in holiday the last days.
As I've seen you implemented some functionality to avoid that some results get lost when the test ends by the timeout. Will you release this functionality in the version 4.0 in the next weeks?

Also, I've read your documentation and added some words. I would already mention that it’s possible to include the GraphUI in the HtmlUI. I'll also included the necessary code in the tags <<code>><</code>>. What do you think about it?

When the new functionality will be released, I will test the final implementation, add the example question as one of my last answers in this thread.

Thanks four your help

Markus


The textareaId macro

A problem arises if the HTML supplied by the question author contains elements with explicit id attributes, as might be required if there is also JavaScript present that needs to refer to the new elements. If the review options allow display of the question author's answer then when the student reviews their quiz, the student answer and the author's answer will both include the new elements, resulting in a conflict of id. Apart from being invalid HTML, this is likely to result in wrong results when any JavaScript code referencing the elements runs.

A workaround for this problem is to include the special macro string

___textareaId___

as part of any new ids. Note that there are THREE (3) underscores at both the start and end of the macro string.

When the HTML UI inserts the global extra html into the question, that macro is replaced everywhere by the actual ID of the answer box's text-area, which is different for the student and author answers. This technique can also be used to ensure that the names given to elements like radio buttons are different in the two answers.

Using this macro, it is also possible to include the GraphUI in the HtmlUI. By including a custom grader, it is possible to create a Question with several sub questions. To do this, in the html-code a textarea element needs to be defined:


<textarea class="coderunner-ui-element"
     id="graph_target_name____textareaId___" name="graph_target"
     spellcheck="false" rows="18" data-params=""
     data-globalextra=""></textarea>

This element is hidden, but at this position, the graph will be drawn. Secondly, the amd-script needs to get called using:

<script>
M.util.js_pending('qtype_coderunner/userinterfacewrapper');
require(['qtype_coderunner/userinterfacewrapper'], function(amd) {
    amd.newUiWrapper("graph", "graph_target_name____textareaId___");
    M.util.js_complete('qtype_coderunner/userinterfacewrapper');
});
</script>

By using multiple graph elements, keep in mind that the id and name should be unique. For more information, see this CodeRunner author's forum thread where Markus Gafner (who contributed this workaround) shows a HtmlUI question with an embedded GraphUI question, plus other embedded questions.

(Edited by Richard Lobb - original submission Friday, 29 January 2021, 8:54 AM)

(Edited by Richard Lobb - original submission Wednesday, 10 March 2021, 8:35 PM)

(Edited by Richard Lobb - original submission Wednesday, 10 March 2021, 8:40 PM)

Ca răspuns la Markus Gafner

Re: Graph in HTML-Field

de către Richard Lobb-

Hi Markus

Many thanks for the updated textareaId documentation - that's very helpful. I've incorporated it into the Readme.md for the upcoming release. 

Yes, the new version includes code to deal with the bug you encountered with the HTML UI not sync'ing back to the textarea when a quiz times out. Although I have an onsubmit handler for the form, it turns out that a submit event is not fired if a form's submit method is called directly by JavaScript, as it is when a quiz times out. My workaround is to add a sync timer which regularly calls the UI plugin's sync() method to serialise the UI state back into the textarea. I've set the default sync interval to an arbitrary 5 secs, but have provided a UI parameter so that the question author can change this on a per-question basis if required. The number is totally arbitrary and I really have no feeling for what might by appropriate. As your use of the HTML UI shows, it is possible for authors to construct almost arbitrarily complex UIs so the sync overheads could perhaps become significant if called every second? Your thoughts?

For now I've also added the sync_interval_secs UI parameter to the other two UIs that don't automatically keep the textarea in sync: gapfiller UI and table UI. However since the overheads with those are likely to be always small, I might just use fixed time intervals for them. It's easy to add back in again if needed in the future.

Since syncing the UI contents back to the textarea doesn't in turn sync back to the server, there's still an element of risk with relying on quiz time outs for submissions. If, say, a student's laptop battery fails, or the network goes down, all a student's work could be lost. So I prefer to always provide students with at least a precheck button that provides some level of sanity check to the student while also submitting their work to the server.

If you're interested in checking out the intended new version, you could pull the Development branch from github. It's still in pre-release state, but I think it's close to release and I'm about to install it on our production server for this coming academic year. However, the Readme documentation and some of the inline documentation hasn't yet been updated and of course there are still likely to be a few bugs. But I'd certainly be grateful for any feedback.

Regards

Richard