From 18ee82e7e3ce75105fc318017e406248ac934f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20B=C3=B6sch?= <luca.boesch@bfh.ch>
Date: Fri, 10 May 2024 09:34:23 +0200
Subject: [PATCH] MDL-81865 mod_quiz: Display modal for 'Add random question'
 as mform.

This is a backport of MDL-81713.
---
 .../add_random_question_form.mustache         | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/mod/quiz/templates/add_random_question_form.mustache b/mod/quiz/templates/add_random_question_form.mustache
index db175ae146f..5cf4e428c1b 100644
--- a/mod/quiz/templates/add_random_question_form.mustache
+++ b/mod/quiz/templates/add_random_question_form.mustache
@@ -50,7 +50,7 @@
     }
 }}
 <div class="mt-2 position-relative" data-region="add_random_question_form-container">
-    <form action="{{returnurl}}" method="POST" id="add_random_question_form">
+    <form action="{{returnurl}}" method="POST" id="add_random_question_form" class="mform">
         <fieldset id="id_existingcategoryheader">
             <legend>{{#str}} randomfromexistingcategory, mod_quiz {{/str}}</legend>
             <!-- Question bank -->
@@ -78,23 +78,35 @@
         <fieldset id="id_newcategoryheader">
             <legend>{{#str}} randomquestionusinganewcategory, mod_quiz {{/str}}</legend>
             <!-- New categoryname -->
-            <label class="mr-md-2 mb-md-0" for="categoryname">{{#str}} name {{/str}} </label>
-            <input type="text" class="form-control" id="categoryname" name="categoryname" maxlength="254" size="50">
+            <div class="mb-3 row fitem">
+                <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
+                    <label class="mr-md-2 mb-md-0" for="categoryname">{{#str}} name {{/str}} </label>
+                </div>
+                <div class="col-md-9 d-flex flex-wrap align-items-start felement" data-fieldtype="text">
+                    <input type="text" class="form-control" id="categoryname" name="categoryname" maxlength="254" size="50">
+                </div>
+            </div>
 
-            <!-- Select number of random question -->
-            <label class="mr-md-2 mb-md-0" for="parentcategory">{{#str}} parentcategory, question {{/str}} </label>
-                {{#questioncategoryhelp}}
-                    {{>core/help_icon}}
-                {{/questioncategoryhelp}}
-            <select id="parentcategory" name="parentcategory" class="form-control">
-                {{#questioncategoryoptions}}
-                    <optgroup label="{{label}}">
-                        {{#options}}
-                            <option value="{{value}}">{{{name}}}</option>
-                        {{/options}}
-                    </optgroup>
-                {{/questioncategoryoptions}}
-            </select>
+            <!-- Select parent of new category -->
+            <div class="mb-3 row fitem">
+                <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
+                    <label class="mr-md-2 mb-md-0" for="parentcategory">{{#str}} parentcategory, question {{/str}} </label>
+                    {{#questioncategoryhelp}}
+                        {{>core/help_icon}}
+                    {{/questioncategoryhelp}}
+                </div>
+                <div class="col-md-9 d-flex flex-wrap align-items-start felement" data-fieldtype="select">
+                    <select id="parentcategory" name="parentcategory" class="form-control">
+                        {{#questioncategoryoptions}}
+                            <optgroup label="{{label}}">
+                                {{#options}}
+                                    <option value="{{value}}">{{{name}}}</option>
+                                {{/options}}
+                            </optgroup>
+                        {{/questioncategoryoptions}}
+                    </select>
+                </div>
+            </div>
 
             <!-- Buttons -->
             <div class="modal-footer mt-1" data-region="footer">