Hi DangHieu

This is looking great - very nice code. Many thanks. However, there is one bug, I think, which it would be nice to fix before merging.

If I turn on full screen mode for the two Ace editors within the Scratchpad (i.e. changing the parameters from false to true in the calls to setAllowFullScreen() in the addAceUis of scratchpad.js), I expect to be able to maximise either one. However, what I see is the attached image. Would you be able to look into this, please?

Also, am I right in thinking that the code you originally added to renderer.php is no longer relevant? I see you deleted the call to render_from_template(), but there are still four lines relating to full-screening:

   // Add the position-relative div to allow the styling of the fullscreen button.
    $qtext .= html_writer::start_div('position-relative');
    $qtext .= html_writer::tag('textarea', s($currentanswer), $taattributes);
    ...
     $qtext .= html_writer::end_div();

Nearly there :-)

Hi @trampgeek,
Thanks for your review.

 // Add the position-relative div to allow the styling of the fullscreen button.
    $qtext .= html_writer::start_div('position-relative');
    $qtext .= html_writer::tag('textarea', s($currentanswer), $taattributes);
    $qtext .= html_writer::end_div(); 

This code is necessary for positioning the icon in the corner of the editor. Removing it would disrupt the layout, causing the icon to display incorrectly as shown below:

To ensure the icon displays correctly, a div with position-relative must be created.

I apologize for the confusion regarding the Scratchpad. In our previous discussion link it seems James Napier (author of scratchpadUI) not prefer to enable it. Nonetheless, if you choose to do so, there's a resizing bug and a display position issue for only the scratchpad, illustrated below::

To address this, I propose a solution tailored to the Scratchpad editor. Specifically, I suggest passing the second parameter (this.ui name) to the initFullScreenToggle function. If this.ui name = scratchpad, we can handle and resolve the issue specific to the Scratchpad UI.

Furthermore, I recommend separating the Scratchpad issue into another pull request if you intend to address it. Given the uncertainty of where to place the fullscreen and exit fullscreen buttons in the Scratchpad UI, this pull request focuses on removing the old fullscreen code and implementing a fullscreen feature for all editors. And I want to know what you expect with the scratchpad UI:

1. Where should the icon be placed in the scratchpad UI?
2. When going into fullscreen mode, can I set the size of the first editor to 50% and the second editor to 50% to prevent them from stretching out the height excessively? Additionally, upon exiting fullscreen mode, will the size revert to its original dimensions?
   I hope this clarifies matters. Many thanks

Hi DangHieu. Thanks for the clarifications. However, I still think it's wrong to have to include extra code in renderer.php, since that's just one of the several places that generate UI-wrappers.

I think I didn't explain clearly what I wanted to achieve with the Scratchpad UI. I agree it's not practicable to full-screen the entire Scratchpad UI because of the way it behaves when you open and close the scratchpad and when output is generated. What I had attempted to do as an experiement was to allow each of the two embedded Ace editors to be full screened. This may not be very useful but it does mean that without the scratchpad enabled, it mimics the simple Ace UI behaviour. Mostly, I just did it as a way to test functionality. I was surprised when the full-screen buttons that I expected to appear in the bottom bars of each Ace editor windows appeared instead (one on top of the other) at the bottom right of the entire UI.

I've come up with a simple solution that seems to work fine and addresses my two concerns. Rather than append the screen-mode-button div to the parent of the wrapper node, I've simply set the wrapper node to have class position-relative and have appended the the screen-mode-button div directly to that. It seems to work in all situations I've looked at, including within the Scratchpad UI as described above. This allows me to remove the extra code from renderer.php, too :-)

Here are images of the simple Ace editor UI, the Scratchpad UI and the patch file showing the changes I made (just the trivial change described above plus a 1 pixel tweak to the absolute positioning of the icons).

changes.patch..zip

Would you mind checking if you're happy with these changes, please, in case I'm missing something important? If you're happy I'll push this version back to Master.

Thanks again for all the work on this.

Hi @trampgeek,
Thanks for your fixing, I am so happy with your change.
There is a minor issue regarding the use of the "TAB" key with the icon button for fullscreen, particularly concerning accessibility for visually impaired users. Which I have fixed by using:

   // Add the position-relative div to allow the styling of the fullscreen button.
    $qtext .= html_writer::start_div('position-relative');
    $qtext .= html_writer::tag('textarea', s($currentanswer), $taattributes);
    ...
     $qtext .= html_writer::end_div();

Issue:

But we have to add position-relative to add position-relative to this.wrapperNode = $("<div id='" + this.taId + "_wrapper' class='ui_wrapper position-relative'></div>"); for display the fullscreen button in 2 editors of scratchpad UI.
Anyway, if you are happy with this behavior. I agree with your change and you can push it to master.
But if you want to fix this issue, the root cause comes from this line 180.
To fix this I have an approach:

1. Add a class position-absolute to screen-mode-button in question/type/coderunner/templates/screenmode_button.mustache
2. Remove position-relative in class 'ui_wrapper position-relative' in question/type/coderunner/amd/src/userinterfacewrapper.js
3. Add a CSS for screen-mode-button

.que.coderunner .screen-mode-button {
    margin-top: 13px;
    right: 30px;
}

4. Remove CSS don't need. And update CSS in a editpage.

The approach hasn't completely fixed this. It only fixes the issue on the surface. When entering full-screen mode, this problem still occurs when using the "TAB" key to navigate to the exit fullscreen button.
If you have any good approach, Could you please give me your solution then I will try my best to fix this?

Feel free if you have any concerns. Thank you so much @trampgeek.

Wow, that is indeed a subtle problem - thanks for spotting.

I never use the TAB key to step through the interactable elements in a page myself, and I've never seen our students using it. I think it's primarily used by visually-impaired students, right? In which case, is there any point in allowing the tab key to even visit the full-screen icon? It seems to me that full-screening for such students would be a distraction, not a help.

So my "solution" for now is just to set the tab index for the full-screen icon to -1, so that it never gets visited on hitting the tab key. I have very little experience with visually-impaired students, so please advise if that is not a suitable fix.

I've pushed that code to the repo in the meantime, anyway.

Thanks again for a great effort on this.

I use keyboard shortcuts all the time, inclusing using Tab to navigate around forms. It is much faster, and better on my wrists to use my mouse less.

So, while it is an accessibiliy requirement that keyboard shortcuts work, really, it benefits everyone. But, the accessibility thing is a legal requirement in various juristictions, including the UK.

Sorry, I don't have a suggestion to this specific problem. Since this is merged (good) I suggest we open a new issue to work on the accessibility problem.