From d0c48cd69335c1b28dbfdec71b8d36e870e9d320 Mon Sep 17 00:00:00 2001
From: Tim Hunt <T.J.Hunt@open.ac.uk>
Date: Thu, 9 Jan 2020 20:19:43 +0000
Subject: [PATCH] MDL-67653 questions: prevent the flag flickering as the page
 loads

---
 mod/quiz/styles.css                   | 4 ----
 question/engine/renderer.php          | 8 +++++---
 theme/boost/scss/moodle/question.scss | 6 +++++-
 theme/boost/style/moodle.css          | 5 ++++-
 theme/classic/style/moodle.css        | 5 ++++-
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/mod/quiz/styles.css b/mod/quiz/styles.css
index 491140a4b8a..8c793159e3f 100644
--- a/mod/quiz/styles.css
+++ b/mod/quiz/styles.css
@@ -39,10 +39,6 @@
     border: 1px solid #dcdcdc;
 }
 
-body.jsenabled .questionflagcheckbox {
-    display: none;
-}
-
 #page-mod-quiz-attempt #connection-ok,
 #page-mod-quiz-attempt #connection-error {
     position: fixed;
diff --git a/question/engine/renderer.php b/question/engine/renderer.php
index 6d19acbf753..d49777638b5 100644
--- a/question/engine/renderer.php
+++ b/question/engine/renderer.php
@@ -323,21 +323,23 @@ class core_question_renderer extends plugin_renderer_base {
         if ($flagged) {
             $icon = 'i/flagged';
             $alt = get_string('flagged', 'question');
+            $label = get_string('clickunflag', 'question');
         } else {
             $icon = 'i/unflagged';
             $alt = get_string('notflagged', 'question');
+            $label = get_string('clickflag', 'question');
         }
         $attributes = array(
             'src' => $this->image_url($icon),
             'alt' => $alt,
+            'class' => 'questionflagimage',
         );
         if ($id) {
             $attributes['id'] = $id;
         }
         $img = html_writer::empty_tag('img', $attributes);
-        if ($flagged) {
-            $img .= ' ' . get_string('flagged', 'question');
-        }
+        $img .= html_writer::span($label);
+
         return $img;
     }
 
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index 6154e04def9..bbcf32e0eb4 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -414,7 +414,11 @@ body.path-question-type {
     vertical-align: text-bottom;
 }
 
-.que input.questionflagimage {
+body.jsenabled .questionflag input[type=checkbox] {
+    display: none;
+}
+
+.que .questionflagimage {
     padding-right: 3px;
     height: 16px;
     width: 16px;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 14fa48d7bc5..a17a24c46a4 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15282,7 +15282,10 @@ body.path-question-type {
 .que .questioncorrectnessicon {
   vertical-align: text-bottom; }
 
-.que input.questionflagimage {
+body.jsenabled .questionflag input[type=checkbox] {
+  display: none; }
+
+.que .questionflagimage {
   padding-right: 3px;
   height: 16px;
   width: 16px; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 71541b447fc..eee2505deb0 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15545,7 +15545,10 @@ body.path-question-type {
 .que .questioncorrectnessicon {
   vertical-align: text-bottom; }
 
-.que input.questionflagimage {
+body.jsenabled .questionflag input[type=checkbox] {
+  display: none; }
+
+.que .questionflagimage {
   padding-right: 3px;
   height: 16px;
   width: 16px; }